javascript - 显示/隐藏固定菜单 (jQuery)

Question

我正在尝试修复标题导航并为其设置动画，以便当用户从顶部滚动超过 80 像素时，它会从浏览器窗口外部弹出。然后我想在用户向后滚动超过 <80px 时反转动画。我已经走到这一步了(在代码的前面设置了 throttle 功能):

var e = $(window).scrollTop();
$(window).on("scroll", throttle(function() {
        var t = $(window).scrollTop();
        t > 80 ? t > e ? $(header).animate({
          top: "-150px"
        }, 200) :

在“其他”点我完全卡住了。我一直在寻找其他类似的功能并试图解释代码但真的很挣扎。非常感谢任何帮助。

Answer 1

为什么要将它与 e(通常为 0)进行比较。那是没有意义的。如果您希望在 window 的 scrollTop 变为 80px 时发生某些事情，只需使用以下代码即可。也请不要在 animate 的 stop() 函数中使用单个 true 参数。

$(function () {
  $(".peek-a-boo").css({
    top: -200
  });
  $(window).scroll(function () {
    if ($(window).scrollTop() > 80)
      $(".peek-a-boo").stop(true).animate({
        top: 0
      }, 200);
    else
      $(".peek-a-boo").animate({
        top: -200
      }, 200);
  });
});

* {box-sizing: border-box;}
.peek-a-boo {position: fixed; background-color: #99f; width: 100%; top: 0; left: 0; padding: 5px; text-align: center;}
.heighter {height: 1000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header class="peek-a-boo">Peek</header>
<div class="heighter"></div>