- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Regular nav turned static, back to regular?
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.
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.
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!
Glad to help out. It can be quite tedious to google something if you’re not exactly sure what terms to search for…