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

好的我现在知道如何删除窗口宽度的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); 

换句话说，

当我滚动它必须添加一个类，但是当它resize时它必须删除类+它也必须在我向上滚动时删除。

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