Jumping navigation bar issue

Question

My problem is quite complex (difficult to explain at least).

I have a responsive navigation bar that is by default NOT on the top of the page but you have to scroll down a bit for the navbar to reach the top of the browser window.

On desktop (48em<) one can simply scroll through the navbar (so it simply disappears when scrolling down) but when scrolling back up, it gets a "sticky" class (thanks to JS) and appears on top.

On mobile, the navbar gets sticky once the scroll position reaches the navbar element.

My problem is with the mobile view. I had to add a piece of CSS code so that the page content won't flicker (jump) when scrolling down. (I only need it when the sticky class is added by JS.)

.sticky + .content {
  padding-top: 58px;
}

Which works just fine when the hamburger menu is CLOSED.

When the menu is opened, the navbar's height changes and it requires more padding on top for it not to make the page content jump. See the gif below.

If I change this padding to 248px then the content doesn't jump when the menu is opened, but it jumps when it's closed. ‍♂️

.sticky + .content {
  padding-top: 248px;
}

I guess I should write a piece of JS code that would do this:

If nav checkbox is checked then change .sticky + .content {padding-top: 248px;}
If it's unchecked change it back to .sticky + .content {padding-top: 58px;}
All this only below 48em. On desktop the padding is supposed to be 0.

Here's a fiddle with the code: https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/

I don't know much about JS so any help would be appreciated.

user_6743808 · Answer

The modern answer to you problem is to position submenu with absolute.

.big-wrapper-main {
    position: relative;
}

.menu {
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    z-index: 5;
    background-color: white;
}

Submenu positioned that way doesn't change the height of the parent, is positioned after it (because of top: 100% - 100% stands for 100% height of the parent).

The problem is that you are using float and clear and we don't do it in web development for the while now and the height of your .big-wrapper-main is 0px so you have to add position relative to #navbar (when it is not fixed).

I had to add .header.sticky to overwrite position relative.

.header.sticky {
    position: fixed;
}

user_11915216 · Answer

The problem is not in the padding-top.. Actually you shouldn't manipulate your sticky class. CSS position: sticky does for you all the job automatically. You have to fix 3 things:

You don't need to toggle .sticky class on scroll.. You have to remove this code:

// You don't need this all
if (window.pageYOffset > sticky) {
  header.classList.add("sticky");
} else {
  header.classList.remove("sticky");
}

you permanently add class sticky to the header

You remove

@media (max-width: 767px) {
  .sticky {
  /* position: fixed; You don't need this */
  }
}

Check this fiddle: https://jsfiddle.net/tyminko/coetd4jx/1/

Jumping navigation bar issue

2 Answers