Responsive Fixed-Nav?

I understand how to create a fixed nav menu. The one I am designing has links to various anchor points on the pag开发者_JS百科e. What I do not understand is how to I have the menu items automatically indicate where I am on the page? Can this be done without JS?

This effect is found on many 1-page designs. For instance:

http://www.thirdculturestudios.com/

http://kevinmheineman.com/

Any help would be appreciated.

You can do the jump using <a name="resourceName" id="resourceName"> anchor tags. But the smooth scrolling to the item needs javascript.

You just use <a href="#resourceName">Text</a> to just jump to it (non js world).

Edit: clarified grammar since I tried rereading it and realized it would be confusing the way I wrote it

I'm not aware of a way to do that in CSS. Both of the pages you link to involve adding/removing classes dynamically based on the click event. CSS has no way of dynamically adding classes.

If you're interested, here's how you could do the link highlighting depending on if it's clicked simply in jQuery:

<div id="container">
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 2</a></li>
    </ul>
</div>

var a = $('#container a');
a.click(function() {
    a.removeClass('active'); 
    $(this).addClass('active');
});

http://jsfiddle.net/H5rNM/

You cannot do this without JavaScript, because CSS... well... cascades. The way those pages work is that each menu item has a class .active or similar, that is added when the item is clicked.

EDIT: I believe you're looking for jQuery's scroll() (see here) , where you can specify a function that takes place when the user scrolls. In this case, the function would check the scrollTop value and compare it to the offset of page sections, then add a class to the appropriate menu item.

A quick Google search of these terms will point you in the right direction.

No can't be done without Javascript.