Regular nav turned static, back to regular?

[lu-em]

I am quite new to CSS, and I have spent hours perusing this forum, Stack Overflowe, and Google, and I cannot find the answer. I’m sorry if the solution is simple and I’ve overlooked it by not searching for the right terms.

Like this website, EssieButton.com, I would like to have a regular nav menu under my header, and then have it turn to a static nav when scrolling. When at the top of the page, I’d like to have it return to a regular view. How do I do this?

Regular view
http://i.imgur.com/NAG9sMA.png

When scrolling
http://i.imgur.com/fROil48.png

I would appreciate any turn in the right direction.

[Shikkediel]

It’s likely done with jQuery. Actually not that overly complicated – there are two menus, the second one is shown when the page has scrolled a certain amount of pixels down (beyond the point where the first menu disappears). The newly shown menu is ‘sticky’ to the top in that is has fixed positioning. Here’s a general example of some code that will do this :

$(window).scroll(function() {

    var offset = $(this).scrollTop();
    var turningpoint = 500px;

    if (offset > turningpoint) $('#stickymenu').fadeIn();
    else $('#stickymenu').fadeOut();
});

Hope that helps.

[lu-em]

I’m sorry. That worked perfectly! I’m new to this and still trying to learn CSS vs JS when I see it. Thank you so much for the help!

[Shikkediel]

Glad to help out. It can be quite tedious to google something if you’re not exactly sure what terms to search for…

[Author]

Posts