用户滚动到页面底部时超时后的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);

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

---

---

另外，我的页面分为三个不同的部分（页眉、主页和页脚）。除了一部分之外，我的页面中的每一件事都运行良好……我的内容滑过我的菜单。但我希望我的菜单始终在前面。

jsFiddle

提前感谢您的帮助，请不要过分抨击我.. 仍然在这里学习！

Answer 1

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

因为这不是计时器，而且不是有效代码，即使没有出现错误。 jQuery's .scroll() 没有 delay 参数。

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

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

Demo

---

或者你的 JS，使用 setTimeout:

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

Demo

---

我的内容滑过我的菜单。

那是因为您的 #header 的 z-index 为 -10，而您的内容为 10。如果您希望菜单始终位于顶部，则要么整个标题必须位于顶部，要么菜单必须位于顶部在标头之外，并且z-index 超过 10。