I’m trying to add a navbar that remains fixed to the top of the browser window when it hits the top. The problem I’m having is all the content below it jumps up as the navbar is removed from the natural flow of the page.
I’ve used plugins in the past but I’m trying to streamline it a bit with some ‘simple’ jQuery. The example I’m working on is this:
A few things to note:
The height of .page-head (nav) could change so setting a height of it in the CSS won’t work.
The .info-bar on the top can be removed at times. But as that is not fixed I don’t think it’s a problem?
Also you can’t see this in CodePen but I had a problem where if I scrolled down half the page and refreshed the browser the nav stayed fixed but the class was note added (I use this to add a shadow when the element becomes fixed). And when I scrolled up past where the navbar was fixed after the refresh the bar became un-fixed even though it was halfway down the page. Like the bar was treating it’s starting point as the actual top of the browser.
Thanks man, that looks like it works great! I was trying to use position: sticky with a Polyfill, which looked like it worked fine but I also have a slide-out menu on mobile and although the plugin had a fix for sticky menus, when the menu was shown the nav bar would jump/flicker which didn’t look great! There fix works a lot better with position: fixed though!
Out of interest, whats the code for .info-bar do?
Also as I may have several .band divs on a page, am I ok to use core = $('.band:first-child') or maybe core = $('.page-head + .band') to make sure it doesn’t interfere with anything else by accident?
I actually moved the class so it was applied onto the body. When a product is added to the basket a pop up appears. So that allows me to change the position of the basket as well so it’s always the same distance from the basket text.