Question

好的，我现在知道如何删除窗口宽度的abd add class。

但现在我正在努力解决这个问题：

我想要这个：

 var num = 90; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('#menu2').addClass('f-nav');
    } else {
        $('#menu2').removeClass('f-nav');
    }
});

使用它：

function checkWidth() {
    if ($(window).width() > 1049) {
        $('#menu2').addClass('f-nav');
    } else {
        $('#menu2').removeClass('f-nav');
    }
}

$(window).resize(checkWidth);

换句话说，

当我向下滚动时，它必须添加一个类，但是当它调整大小时，它必须删除类+当我向上滚动时它也必须被删除。

Answer 1

根据你的评论@Lashus的回答

|      | > 1050px | < 1050px |
+----------------------------+
| top  | -        | -        |
| down | + f-nav  | - f-nav  |

这意味着，在顶部不执行任何操作，但在向下滚动时添加或删除f-nav

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num)
        checkWidth();
});

JSFiddle

另请注意.bind()与.on()

的评论

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。

Answer 2

在这种情况下，如果不使用javascript，则无法更改类。但是，您可以使用CSS Media查询来更改不同设备上给定类的行为。

以下示例：

(CSS)
.f-nav {
    color: #fff;
}

@media screen AND (max-width: 1050px) {
    .f-nav {
        color: #000;
    }
}

与Jquery不同，当宽度屏幕为1050px时删除类

2 个答案: