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' });
                });
            }
        }
    });
});

Full example here

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>