Question 212709 in CSS Question posted in
Some basic documentation can be found here.

Css – Animate sticky nav on scroll issue when scroll amount is small

While creating a sticky navbar that should be animated on scroll reducing its height I notice a strange bug.

When scroll small (for example only one tap on down arrow key), the nav is bouncing because the script seems to return 0 for scroll.

Here is the code :

window.onscroll = function() {
  var scrollDiv = document.getElementById('dojo-nav');
  if (window.scrollY > 0) {
    scrollDiv.style.height = '50px';
  } else {
    scrollDiv.style.height = '200px';
  }
};
body {
  margin: 0;
}

#dojo-nav {
  transition: all 0.2s ease-in;
}
<div id="dojo-nav" style="position:sticky;top:0px;background: violet;height: 200px;"></div>
<div style="height:50vh;background-color: cyan;"></div>
<div style="height:100vh;background-color: orange;"></div>

Is there anybody who can solved this issue without setting position fixed and navbar spacer or same height ?

Tags:

3

Answers


  1. 0

    To understand what is going on, I created this snippet from your code. I wrapped the #dojo-nav in a div. The sitcky positionning is applied to the wrapper but the height change is still applied to the #nav-dojo element :

    window.onscroll = function() {
  var scrollDiv = document.getElementById('dojo-nav');
  if (window.scrollY > 0) {
    scrollDiv.style.height = '50px';
  } else {
    scrollDiv.style.height = '200px';
  }
};
    body {
  margin: 0;
}
.dojo-nav-wrap {
  position: sticky;
  top: 0px;
  height: 200px;
}
#dojo-nav {
  background: violet;
  height: 200px;
  transition: all 0.2s ease-in;
}
    <div class="dojo-nav-wrap">
  <div id="dojo-nav"></div>
</div>
<div style="height:50vh;background-color: cyan;"></div>
<div style="height:100vh;background-color: orange;"></div>

    In the above snippet, you see that the fact the height of the element is changed on scroll creates a white space when you scroll less than 150px.

    In your code, it makes the height of the page change from the top so window.scrollY equals 0 again. This is what makes your header go back to it’s inital height.

    Login or Signup to reply.
  2. 0

    The sticky doesn’t work here because window.scrollY changes on the sticky DIV’s height changes.

    With fixed window.scrollY is stable thus no the jittering.

    Also you don’t need to set styles in JS, use a CSS variable to change CSS rule values dynamically:

     window.onscroll = () => document.body.classList.toggle('collapsed-nav', window.scrollY > 0);
    body {
  --navbar-height: 200px;
  margin: 0px;
}

body.collapsed-nav{
  --navbar-height: 50px;
}

#dojo-nav {
  transition: all 0.2s ease-in;
  position:fixed;
  width:100%;
  background: violet;
  height: var(--navbar-height);
}

#content {
  padding-top: var(--navbar-height);  
  transition: all 0.2s ease-in;
  height: 50vh;
  background-color: cyan;
}

#footer {
  height:100vh;
  background-color: orange;
}
    <div id="dojo-nav"></div>
<div id="content"></div>
<div id="footer"></div>
    Login or Signup to reply.
  3. 0

    PLEASE ANSWER MY POST

    Cek my post

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search