jQuery粘性导航没有足够快地动画回来

Question

我已经整理了一个＆＃34;粘性导航＆＃34;使用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' });
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;