Question

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

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

我做错了什么？！

Answer 1

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

这不是最漂亮的解决方案，但只是添加一个控制函数执行的标志和一个不经常运行处理程序的超时来解决问题。

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

Answer 2

你的逻辑全都搞砸了。基本上，你想要确保你只是在你绝对需要的时候动画 - 不多也不少。因为滚动事件发生了数百次......当用户滚动时不断快速触发......你想确保在每次滚动事件期间你做的工作量最少。这个特别是意味着你不想在每个滚动事件上查询DOM，如果你不需要（ps。$('selector')是一个dom查询）。看看这个小提琴：

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

Answer 3

您看到的问题是因为每次调用scroll事件时动画都会排队。如果你等待的时间足够长，你可以看到将顶部设置为0的动画确实有效。

您可以使用stop()功能在尝试运行另一个动画之前停止所有动画。

像这样的东西

if (height > offset) {
   $(".floating-header").stop().show().animate({
     top: "0"
   }, 700);
} else {
   $(".floating-header").stop().animate({
     top: "-13%"
   }, 700);
}

我建议的一些改进是

去除滚动事件处理程序
在排队动画之前检查标题的当前状态。即如果它已被隐藏，请不要试图隐藏它，反之亦然

Answer 4

由于中断，我似乎是最后一次参加派对，但自从我写完后，我会发布答案FWIW。

jsFiddle Demo

您需要去除代码。这是一个简单的系统，但也建议学习Ben Alman's explanation/examples。

\9

subclass.prototype = Object.create(superclass.prototype);

subclass.prototype = superclass.prototype;

jQuery不显示和隐藏标题

4 个答案: