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>