scroll triggered animation extremely delayed

Question

Using jQuery, I am trying to make a navbar similar to this Wordpress plugin: The navbar is hidden/offscreen when the page is loaded, slides down to a fixed position when a certain scroll position is reached, and slides back up to its offscreen position when the user scrolls back up to the top.

I managed to do it, however, the timing is completely wrong: It can take a few seconds after scrolling until the menu bar appears. And it's worse when scrolling up: At first I thought that it doesn't work at all, but then, after sometimes 15 seconds or even more, it eventually moves back up.

Here's my code:

$(window).scroll(function() {
  var scrollposition = $(window).scrollTop();
  if (scrollposition > 100) {
    $("#main_navigation").animate({
      top: "0px"
    }, 600);
  };
  if (scrollposition < 100) {
    $("#main_navigation").animate({
      top: "-82px"
    }, 400);
  };
});

html,
body {
  margin: 0;
  height: 100%;
}
.content {
  height: 200%;
  background: #fda;
  padding: 5em 3em;
}

nav#main_navigation {
  position: fixed;
  z-index: 1;
  top: -82px;
  width: 100%;
  background: #fff;
  height: 54px;
  border-bottom: 1px solid #eee;
}

.logo {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 2em;
  margin: 0;
  width: 36px;
  transform: translateY(-50%);
}

nav#main_navigation ul {
  position: relative;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  display: inline-block;
  list-style: none;
  float: right;
  margin-right: 0.8em;
}

nav#main_navigation li {
  display: inline-block;
  margin-right: 1.2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main_navigation">
  <div class="logo">(logo)</div>
  <ul>
    <li><a href="#">Welcome</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="content">
  <p>This is the content. Scroll down at least 100px to make the navbar appear. This should take 0.6 seconds, but takes much longer.</p>
  <p>Then scroll back up to make the navbar disappear again. This should only take 0.4 seconds...</p>
</div>

I suppose it might have to do with too many scroll events having to be handled, but I don't know how to avoid or filter that. Or is there another reason?

Answer 1

I figured it out: There are a lot of scroll events, and there is an animation triggered with each scroll event, which obviously is too much to handle for the browser. It takes a very long time until all those are processed and the animation is eventually performed, causing the long delay.

So I looked for a way to have the down- and up-sliding animations only be triggered once before the other one is triggered. I used a variable (status_1), whose default value is "closed". When the scroll value goes above 100, the first (down-sliding) animation is triggered only if status_1 is "closed". But as soon as it's triggered, status_1 is set to "open", so it won't be triggered again as long as the scroll value is above 100. Same with the second if-condition and animation:

var status_1 = "closed";
$(window).scroll(function() {
  var scrollposition = $(this).scrollTop();
  if ((scrollposition > 100) && (status_1 == "closed")) {
    $('#main_navigation').animate({
      top: '0px'
    }, 600);
    status_1 = "open";
  };
  if ((scrollposition < 100) && (status_1 == "open")) {
    $('#main_navigation').animate({
      top: '-82px'
    }, 400);
    status_1 = "closed";
  };
});

html,
body {
  margin: 0;
  height: 100%;
}

.content {
  height: 200%;
  background: #fda;
  padding: 5em 3em;
}

nav#main_navigation {
  position: fixed;
  z-index: 1;
  top: -82px;
  width: 100%;
  background: #fff;
  height: 54px;
  border-bottom: 1px solid #eee;
}

.logo {
  display: inline-block;
  position: relative;
  top: 50%;
  left: 2em;
  margin: 0;
  width: 36px;
  transform: translateY(-50%);
}

nav#main_navigation ul {
  position: relative;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  display: inline-block;
  list-style: none;
  float: right;
  margin-right: 0.8em;
}

nav#main_navigation li {
  display: inline-block;
  margin-right: 1.2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="main_navigation">
  <div class="logo">(logo)</div>
  <ul>
    <li><a href="#">Welcome</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="content">
  <p>This is the content. Scroll down at least 100px to make the navbar appear. This should take 0.6 seconds.</p>
  <p>Then scroll back up to make the navbar disappear again. This should only take 0.4 seconds...</p>
</div>