Question

我正在创建一个博客，并尝试使用$(window).scroll(function()，但有些东西会阻止它工作。

当用户向下滚动时，我尝试将名为scrolled的类添加到正文中。有什么想法会阻止它正常工作吗？控制台不会对此提出任何错误。

JS

$(document).ready(function($) {
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            $("body").addClass("scrolled");
        } else {
            $("body").removeClass("scrolled");
        }
    });
});

现场预览

http://personaii-demo.tumblr.com/

Answer 1

删除溢出：添加到容器的auto属性。这将有效。

Answer 2

你的函数需要一个$参数，但是你没有传递任何东西，所以它被覆盖了，你应该这样做：

$(document).ready(function() {
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            $("body").addClass("scrolled");
        } else {
            $("body").removeClass("scrolled");
        }
    });
});

Answer 3

更好的JS：

$(function() {
    $(window).on('scroll', function() {  
        $('body').toggleClass('scrolled', $(this).scrollTop() >= 100);
    });
});

在您的网站上，即使我通过控制台应用，我也看不到任何与.scrolled相关联的CSS。

Answer 4

这是一个有效的速记解决方案，fiddle

$(function() {
  $(window).scroll(function() {    
    var scroll = ($(this).scrollTop() > 100) ? $("body").addClass("scrolled") : $("body").removeClass("scrolled");
  });
});

此外，如果您正在使用jQueryUI，那么您可以使用switchClass()为类更改过程添加一些动画，例如

var scroll = ($(this).scrollTop() >= 100) ? $("body").switchClass("default","scrolled", 1000) : $("body").switchClass("scrolled","default", 1000);

*注意：另外，不要忘记在文档中包含jQuery / jQueryUI库。

窗口滚动功能不起作用

4 个答案: