Question

您好！我一直在学习jQuery一段时间，并试图通过创建一个响应式网站来提高我的技能。我添加了一个导航栏，然后是一个大滑块，下面是网站的主要内容。现在，jQuery（因为菜单背景和主背景都是黑色）在导航栏中添加了一个类，以便在滚动滑块（高度为550px）时将其变为白色，这样它就会更容易阅读。

这就是：我希望jQuery根据窗口的宽度添加该类。如果它 > 600px宽，我希望自动添加该类。否则，我希望jQuery在滚动滑块后立即添加它（因为当窗口宽度小于600px时我隐藏它）。我的代码在下面，如果我调整窗口大小然后刷新页面它可以正常工作，但我希望它动态添加类。你觉得有可能吗？

我希望我清楚自己（英语不是我的第一语言）。如果您需要我更好地解释一下，请告诉我！先感谢您。：）

if ($(window).width() > 599 ) {
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 550) { //if you scroll past the slider
            $("#main nav").addClass("white-menu");
        } else {
            $("#main nav").removeClass("white-menu"); //so it turns black again
        }
    });
} else {
    // add it automatically (the slider is hidden):
    $("#main nav").addClass("white-menu");
};

Answer 1

您可以使用滚动事件

中的所有代码

$(window).scroll(function() {
        if ($(this).scrollTop() >= 550 && $(this).width() <= 599) { //if you scroll past the slider
            $("#main nav").addClass("white-menu");
        } else {
            $("#main nav").removeClass("white-menu"); //so it turns black again
        }
    });

类似的DEMO

关于调整大小，你可以使用

$(window).on('resize',function() {
    $("#main nav").removeClass("white-menu");
});

在窗口调整大小代码将删除该类直到用户滚动然后滚动事件将在用户滚动后触发

或者代替所有这些，你可以使用

$(window).on('scroll resize',function() {
        if ($(this).scrollTop() >= 550 && $(this).width() <= 599) { //if you scroll past the slider
            $("#main nav").addClass("white-menu");
        } else {
            $("#main nav").removeClass("white-menu"); //so it turns black again
        }
});

DEMO

Answer 2

.scroll允许你收听事件，如果你只是在窗口大小合适的时候听，这个听众如果改变就不会被触发，所以我改了一下：

$(window).scroll(function() {
  if ($(window).width() > 599 ) {
    if ($(window).scrollTop() >= 550) { //if you scroll past the slider
        $("#main nav").addClass("white-menu");
    } else {
        $("#main nav").removeClass("white-menu"); //so it turns black again
    }
  }
});

就像Brian提到的那样，你应该在其他情况下使用CSS：

@media (max-width: 600px) {
  #main nav {
    // white-menu styles here
  }
}

供参考，JS的方式是：

$(window).resize(function() {
  if ($(window).width() <= 599 ) {
    $("#main nav").addClass("white-menu");
  }
});

也可能值得考虑对这些事件侦听器进行限制/去抖动。他们会被称为很多，如果你的JS开始做更复杂的事情，你会看到性能受到打击。此示例使用underscore library：

var onScroll = function() {
  if ($(window).width() > 599 ) {
    if ($(window).scrollTop() >= 550) { //if you scroll past the slider
        $("#main nav").addClass("white-menu");
    } else {
        $("#main nav").removeClass("white-menu"); //so it turns black again
    }
  }
}

// Don't run until the window has stopped being resized for at least 50ms
var debouncedOnScroll = _.debounce(onScroll, 50);

$(window).scroll(debouncedOnScroll);

请参阅http://underscorejs.org/#debounce

Answer 3

有趣。我在小提琴中使用了你的代码并找到了它。正如它在另一个答案中说的那样，代码的改进将使用scroll函数来包装所有动作：

$(window).scroll(function() {
    $("#main nav").toggleClass("white-menu", ($(window).scrollTop() >= 550 && $(window).width() <= 599));
});

根据窗口的宽度{j>动态地使jQuery动作

3 个答案: