仅限Javascript

Question

这是我正在使用的JS代码：

$("document").ready(function($){
var nav = $('#menu2');

$(window).scroll(function () {
    if ($(this).scrollTop() > 90) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
});

但我似乎无法将其纳入我的代码中。

function checkWidth(init){
/*If browser resized, check width again */
if ($(window).width() < 514) {
    $('html').addClass('mobile');
}
else {
    if (!init) {
        $('html').removeClass('mobile');
    }}}$(document).ready(function() {
checkWidth(true);

$(window).resize(function() {
    checkWidth(false);
});

我想要的是，当.f-nav被添加到#menu2时，当屏幕为<1050时，该类应被移除。

Answer 1

要将html更改为#menu2，只需将其替换为另一个。 jQuery在这方面非常简单

if ($(window).width() < 514) {
    $('#menu2').addClass('f-nav');
} else {
    $('#menu2').removeClass('f-nav');
}

JSFiddle

Answer 2

最好使用media query

来实现

@media screen and (max-width:1050px){
  .mobile{
     /* will only apply on devices narrower than 1050px */
  }
}

编辑：也可以在现代浏览器中使用javascript进行媒体查询

if (matchMedia) {  // check if browser supports media queries from JavaScript
    var mq = window.matchMedia("(max-width: 1050px)");
    WidthChange(mq);
    // every time width changes, check the media query
    mq.addListener(function WidthChange(mq){
       if(mq.matches){
           //we are in a mobile size browser
           $('#menu2').addClass('mobile');
           $('#menu2').removeClass('f-nav');
       } else{
           // desktop browser
           $('#menu2').addClass('f-nav');
           $('#menu2').removeClass('mobile');
       }
    });
}

Answer 3

当您在比断点大的屏幕上加载网站时，脚本将无法工作，因为您需要重新计算屏幕大小（在这种情况下刷新页面）。你需要在调整大小时获得屏幕的宽度。使用resize（）方法，在其中放置测试条件，并将类分配给元素。参考可以帮助您：http://api.jquery.com/resize/

Answer 4

如果你想在JS中改变div的类，你可以这样做：

document.getElementById("#YourId").className = "YourNewClass"

它只会改变你的类属性： - ）

就像那样，你也可以检查使用哪个类，然后做你想做的事。

感谢Olaf Dietsche：这必须是一个重复的帖子，这里可以是你的回答：jquery, add/remove class when window width changes

Answer 5

有几种方法可以做到：

仅限Javascript

查看实际操作：Fiddle

$(window).resize(function() {
    if ($(window).width() < 1050) {
        $selector.removeClass('my-class');
    } else {
        $selector.addClass('my-class');
    }
}).resize(); // trigger resize event initially

不要忘记：您不必将$(window).resize置于$(document).ready内。

混合Javascript＆amp; CSS

查看实际操作：Fiddle

此处解释了此技术：http://www.senaeh.de/media-query-variablen-javascript-auslesen/

基本原则：使用CSS伪元素设置变量并使用javascript获取它。

即使使用了媒体查询，如果必须使用Javascript，这种解决方法也很好，因为您不必两次声明断点。

<强> CSS

@media screen and (max-width: 1050px) { body:after { content: 'tablet'; display: none; } }

<强>的Javascript

var mode = window.getComputedStyle(document.body,':after').getPropertyValue('content');

请注意：IE＆lt; 9不支持getComputedStyle。您必须使用polyfill like this one。

Jquery，宽度屏幕为1050px时删除类

5 个答案:

仅限Javascript

混合Javascript＆amp; CSS