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:
.page-head(nav) could change so setting a height of it in the CSS won’t work.
.info-baron 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.
The fix for the jumping is to add some margin equal to the height of
.page-head, when you give it fixed position it is taken out of the document flow which makes the content adapt its position.
Imma have to look a bit more at the other descriptions…
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
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?
That’s great, works really well! :)
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.
Just thought I’d ask (hopefully) one final question on this without starting a new thread, I know it’s been a while!
I’ve just applied a background image to one of the
.band elements inline and it looks like the script strips the styling when it’s trying to calculate if it needs padding or not. Is it possible to only removing the padding or will I need to set the images in the CSS with a class/ID?
That wouldn’t be too bad but I thought I’d ask first as I think the client would like the image to be swapped out in the CMS so it would probably need to be inline unfortunately. What do you think?
You must be logged in to reply to this topic.