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

Question

This is the JS code i'm using:

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

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

But i can't seem to get this into my code.

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

And what i want is that when .f-nav is added to #menu2 , when the screen is <1050 the classshould be removed.

Answer 1

To change html to #menu2 , just replace one with the other. jQuery is pretty simple in this respect

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

JSFiddle

Answer 2

this is best achieved with a media query

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

EDIT: also possible to use media queries with javascript in modern browsers

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

When you load a website on a screen bigger than your breakpoint, the script wont work, because you need to re-calculate the screen size(refresh the page in this case). You need to get the width of the screen on resize. Use resize() method, and inside it place your test condition, and assign the class to your element. Reference to help you: http://api.jquery.com/resize/

Answer 4

If you want to change the class of a div in JS, you can do something like that:

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

It will just change your class attribute :-)

Like that, you can also check which class is used and do what you want to do with that.

Edit thanks to Olaf Dietsche: this must be a duplicated post, here can be your answer: jquery, add/remove class when window width changes

Answer 5

There are a few ways to do that:

Javascript only

See it in action: Fiddle

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

And don't forget: You don't have to place $(window).resize inside $(document).ready .

Mixed Javascript & CSS

See it in action: Fiddle

This technique is explained here: http://www.senaeh.de/media-query-variablen-javascript-auslesen/

Basic principle: set a variable with a CSS pseudo element and get it with javascript.

This workaround is good if you have to use Javascript even if media queries are used, because you don't have to declare the breakpoint twice.

CSS

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

Javascript

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

Be aware: IE < 9 doesn't support getComputedStyle . You have to use a polyfill like this one .