jQuery粘性导航不能足够快地动画返回

Question

>我用jQuery和CSS把一个"粘性导航"放在一起。一旦用户滚动到某个点，导航就会以动画形式呈现动画并从屏幕顶部向下滑动。 这工作正常。

我想做的是让它动画化，并在用户滚动到导航向下滑动的同一点时向上滚动到视线之外。 一旦他们回到页面顶部，导航应该像往常一样位于顶部。这是一半的工作，但是导航不会完全在视线之外动画，直到用户回到页面顶部，这破坏了错觉。

我需要做什么才能让它在向上滚动时正确制作动画？

这是jQuery：

$(document).ready(function() {
    var nav = $(".header-main");
    var sticky_navigation_offset_top = 100;
    $(window).scroll(function() {
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
        if (scroll_top > sticky_navigation_offset_top) {
            if (!nav.hasClass('header-main-sticky')) {
                nav.addClass("header-main-sticky").css({
                    top: '-100px'
                }).stop().animate({
                    top: '0px'
                }, 500);
            }
        } else {
            if (nav.hasClass('header-main-sticky')) {
                nav.stop().animate({
                    top: '-100px'
                }, 500, function() {
                    nav.removeClass("header-main-sticky").css({ top: '0px' });
                });
            }
        }
    });
});

完整示例在这里

Answer 1

我建议更改此部分：

if (nav.hasClass('header-main-sticky')) {
   nav.stop().animate({top: '-100px'}, 500, function() {
      nav.removeClass("header-main-sticky").css({ top: '0px' });
   });
}

对此：

if (nav.hasClass('header-main-sticky')) {
   nav.removeClass("header-main-sticky").css({ top: '0px' });
}

$(document).ready(function() {
  var nav = $(".header-main");
  var sticky_navigation_offset_top = 80;
  $(window).scroll(function() {
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top
    if (scroll_top > sticky_navigation_offset_top) {
      if (!nav.hasClass('header-main-sticky')) {
        nav.addClass("header-main-sticky").css({
          top: '-100px'
        }).stop().animate({
          top: '0px'
        }, 500);
      }
    } else {
      if (nav.hasClass('header-main-sticky')) {
        nav.removeClass("header-main-sticky").css({
          top: '0px'
        });
      }
    }
  });
});

.header-main {
  height: 80px;
  background-color: #808080;
}
.header-main-sticky {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-main">&nbsp;</div>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>
<p>Scroll down</p>