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's .scroll()没有delay参数。

可以将延迟添加到CSS中：

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

Demo

或者使用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);
});

Demo

我的内容会滑过我的菜单。

这是因为#header的{{1}}为-10，而您的内容为10.如果您希望自己的菜单保持最佳状态，则整个标题必须打开顶部，或者菜单必须在标题之外，并且z-index超过10。

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

1 个答案: