Question

我有下面的jquery，当用户点击页面底部时添加或删除一个类。我想调整此代码以在用户接近底部时实现更改，或者可能在底部进入视口时调整此代码？

任何帮助都非常感谢！

JS

// Add/remove class to/from .logo upon reaching bottom of page
$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() === $(document).height()) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});

Answer 1

$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() > ($(document).height() - 100) ) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});

更改减去的值以满足您的需要。使用===只有在滚动条位于该确切像素时才会起作用。

Answer 2

你不能只是减去数字来验证何时加或减，例如，下面不会说它是否在最后50个像素内，隐藏并显示，

// Add/remove class to/from .logo upon reaching bottom of page
$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() === $(document).height() - 50) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});

靠近页面底部时添加/删除类

2 个答案: