用户滚动到页面底部时超时后的addClass

Question

我在这里想要设置计时器的jQuery / javascript代码。

$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  var sheight = $(window).height();
  var dheight = $(document).height();

  if (scroll+sheight == dheight) {
    $(".footer").addClass('footer-show-all');
  } else {
    $(".footer").removeClass('footer-show-all');
  }
}, 500);

代码本身有效！ 一般滚动时，它仅显示页脚的20px，到达底部时显示“全部”。 但是底部似乎上升得太快了。 那么为什么这个计时器不起作用？

---

---

我的页面也分为三个不同的部分（页眉，主页脚和页脚）。 除一部分外，所有内容在我的页面上均正常运行...我的内容在菜单上滑动。 但我希望菜单始终都在最前面。

的jsfiddle

在此先感谢您的帮助，请不要对我造成过多的伤害。

Answer 1

那么为什么这个计时器不起作用？

因为这不是计时器，也不是有效的代码，即使没有错误出现也是如此。 jQuery的.scroll（）没有delay参数。

该延迟可以添加到您的CSS中：

.footer-show-all {
    /* keep your existing styles here */
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
}

演示

---

或使用setTimeout到您的JS：

var timer;

$(window).scroll(function(){
    clearTimeout(timer); // Will avoid launching tons of timers every time you scroll
    timer = setTimeout(function(){
        var scroll = $(window).scrollTop(),
            sheight = $(window).height(),
            dheight = $(document).height();
        $(".footer").toggleClass('footer-show-all', (scroll+sheight == dheight));
    }, 500);
});

演示

---

我的内容在菜单上滑动。

这是因为#header的z-index为-10，内容为10。如果希望菜单停留在顶部，则整个标题必须位于顶部，或者菜单必须位于标题之外，并且z-index大于10。