Javascript 使jQuery根据窗口的宽度动态运行

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

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

我希望我说清楚（英语不是我的第一语言）。如果你需要我更好的解释，请告诉我！提前谢谢。：）

---

您可以使用scroll事件中的所有代码

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

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

或者你可以用这些来代替

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

$（窗口）.on（'scroll resize'，function（））{
如果（$（this）.scrollTop（）>=550&&$（this）.width（）
.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");
  }
});

请参见
有趣的内容。我在小提琴中使用了您的代码，它在find中发挥了作用。由于在另一个答案中是状态，您的代码的改进将是使用滚动功能包装所有操作：

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

$（窗口）。滚动（函数（）{
$（“#主导航”）.toggleClass（“白色菜单”），（$（窗口）.scrollTop（）>=550&&$（窗口）.width（）$（窗口）.width（）>“599”这是错误的。您需要一个整数。删除引号。使用。调整大小（）响应性网页设计通常是用css中的@media标记完成的。如果这只是一个练习的话，我不想让你气馁…@Dasina哇！完全错过了。我现在修复了它，谢谢！@Grumpy是的，我尝试过使用它，但结果看起来更糟。我真的不知道如何正确地使用它。如果你投资于使用JavaScript，您可以使用与@media相同的功能，使用.matchMedia API，然后检查它是否真实。感谢您的回复！这非常有帮助，当我更习惯使用jQuery时，我肯定会了解更多有关下划线的信息。：）您好，非常感谢您的回复。这非常有效！我唯一的问题是，当我调整窗口大小时，菜单会一直保持其颜色，直到我滚动。您知道如何解决这个问题吗？或者这只是我的浏览器的一个bug。编辑哦，我是个白痴。当然，如果它在滚动功能中，它在我滚动之前不会工作。对不起！@Drake last update将很有帮助。请与last Demo一起查看一下。非常感谢！效果非常好。我不知道你可以使用
“滚动调整大小”
：）@Drake没关系。我不久前也不知道：）：…祝你好运：）感谢您花时间回复！我尝试过测试您的代码，但没有效果。可能缺少什么东西？我不知道您在哪个Escanrio中使用了它。它在这里起作用：只需记住调整框架大小，以便代码可以在这里应用。现在，您已经学会了在jquery
toggleClass
中切换类的另一种方法让您使用if-else块添加和删除类。更有效、更华丽：）
$(window).resize(function() {
  if ($(window).width() <= 599 ) {
    $("#main nav").addClass("white-menu");
  }
});

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

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