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

【问题标题】：Different from Jquery, Remove class when width screen is 1050px与 Jquery 不同，当屏幕宽度为 1050px 时删除类
【发布时间】：2013-12-09 14:17:26
【问题描述】：

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

也就是说，

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

【问题讨论】：

为什么不用@media screen and (min-width: 1049px) {...}来设置屏幕宽度的样式？
因为它与我的代码斗争。我无法解释为什么，但我真的希望这能一起工作
我有一个桌面菜单，向下滚动时必须跟随，但我希望与桌面菜单编码相同的响应式菜单也跟随到底部。这就是为什么我希望这个工作。我整个星期都在为此苦苦挣扎。
CSS 媒体查询应该可以解决问题。如果你想分开班级，为什么不使用给定菜单的 id？像#xyz .f-nav 和#zyx .f-nav 用于不同的菜单。在这种情况下，您可以将 fixed 设置为其中之一。
这就是我的桌面和响应式在同一个 div 中的问题 #menu2

标签： javascript jquery css coding-style

【解决方案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() 方法是将事件处理程序附加到文档的首选方法。

【讨论】：

是的，这正是我想要的
| | > 1050像素 |
我修改了JSfiddle，它仍然是514px的旧值。如果不起作用，请尝试将输出帧变小。
你我的朋友是个天才。
这是什么意思？这是剪切和粘贴问题吗？还有什么？

【解决方案2】：

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

下面的例子：

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

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

【讨论】：

好吧，我想要这个：当我在顶部并且屏幕大于 1050 像素时，不会添加 f-nav，但是当我向下滚动并且屏幕大于 1050 像素时，它必须添加蜜蜂。并且当屏幕向下滚动时，必须删除小于 1050px 的大小。但是当屏幕位于顶部并且小于 1050 像素时，不会删除任何内容，因为没有添加任何内容。