Search code examples
cssnavigationfixed

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 page. 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.

Solution

  • 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.