Fixed nav on scroll – content jumps.

[grimski]

Hi there,

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:

https://codepen.io/moy/pen/YeavrX

A few things to note:

1. The height of .page-head (nav) could change so setting a height of it in the CSS won’t work.
2. 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.

Any ideas?

[Shikkediel]

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.

codepen.io/BYMWLN

Imma have to look a bit more at the other descriptions…

[Shikkediel]

Firing a scroll event when the page loads should fix the other issue (added that to the code), for most browsers. Opera is known to be stubborn with caching the scroll position.

[grimski]

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?

[Shikkediel]

You could use $('.band').eq(0), seems easiest. First item, zero indexed.

The line with .info-bar calculates the sticky switching point, I think you accidentally used the main nav itself before…

[Shikkediel]

I’ve put them inside a resize handler (and fire a single resize after that for the first calculation), just in case the height of the elements change with different screens.

[grimski]

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.

[grimski]

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?

[Shikkediel]

Give this a try…

codepen.io/NYvoap

Instead of emptying the attribute, it reverts it to the initial state.

[grimski]

That’s great @shikkediel, thanks a lot (again)! :)

[Shikkediel]

No problem mate. Glad to.

[Author]

Posts