javascript - jQuery 不显示和隐藏标题

Question

我正在尝试制作一个出现在页面特定位置的页眉。 所以我正在做的是检查滚动到页面顶部和元素的顶部偏移量，在该元素之后应该出现标题。如果 scrollTop 大于偏移量，则显示标题，否则它会消失。

但是!当我滚动到该位置时，标题位置不断在 top: -13% 和 top: -12.999998% 之间切换。一段时间后，它终于显示标题，但它从未消失。

我做错了什么？!

JSFiddle:https://jsfiddle.net/5k5s016f/

Answer 1

嗯，我认为问题在于 .animate() 函数不断运行，导致动画在结束前“重新启动”。

这不是最漂亮的解决方案，但只需添加一个控制函数执行的标志和一个超时以减少运行处理程序的频率即可解决问题。

https://jsfiddle.net/5k5s016f/2/

var visible = false;
$(window).scroll(function() {
    setTimeout(function(){

    var height = $(window).scrollTop();
    var $page2 = $("#page2");
    var offset = $page2.offset().top;

    if (height > offset) {
      if    (visible) {
        return;
      }
      visible = true;
      $(".floating-header").show().animate({
        top: 0
      });
    } else {
        if (!visible) {
        return;
      }
      visible = false;
      $(".floating-header").animate({
        top: "-13%"
      });
    }

  }, 200)
});