I’m trying to modify this example in the following way: I would like to have the navbar below the site’s logo and then when the page is scrolled, it sticks once it makes it to the top of the window. Currently, I’ve only been able to get it to stick to the same location on the page where it spawned.
The general idea is to remember original top offset (Y-coordinate) of the bar and then listen for its changes (during the scroll). If it gets lower than zero, that means top edge of the bar goes off screen. When it happens, apply sticky class to the bar to give it fixed position at the top.
Just to add to @megazoid’s explanation, you might also apply a “spacer” which becomes visible when the nav bar becomes sticky to prevent jumping of the content… (forked fiddle)
Thank you guys, very much for your help! I’ve implemented the changes and it’s sticking properly but it’s exhibiting some strange behavior when I insert the link structure. The nav bar goes about half height, cutting the words in half until it sticks to the top, at which time it goes full height.
I’ve got one more issue that I’ve found that I’m unable to figure out. If this page loads in a mobile size, the body’s content pushes up into the logo and navigation’s space. An image for explanation below. What would I need to do to fix this?
