如何在媒体查询CSS中禁用jQuery属性

Question

How to remove or disable jQuery properties (Class and Id) in media query css? I want to remove or disable the properties if it reaches to 991px size.

Here's my code.

$(window).scroll(function() {
        if ($(this).scrollTop() > 1){  
            $('#stickyHeader').addClass("sticky01");
            $('.site-title').attr("id", "stSize");        
            $('#site-navigation').addClass("stNavSize");        
        }else{
            $('#stickyHeader').removeClass("sticky01");
            $('.site-title').removeAttr("id", "stSize");
            $('#site-navigation').removeClass("stNavSize");
            $('.site-title').addClass("stSize2");
            $('#site-navigation').addClass("stNavSize2");
        }
    });

Thanks for the help :)

Answer 1

You could make a new class or id with 991px and set it's display=none,

@media you can addClass for screen larger than 991px

I hope it helps, otherwise write me in comment and I will be glad to help you

Answer 2

CSS media queries to change elements at some viewport breakpoint

/* CSS for > 991px */

.element {
  color: red;
}

/* CSS for < 991px */

@media (max-width: 991px) {
  .element {
    color: blue;
  }
}

jQuery to add/remove classes, id's etc, on load and resize

$(window).on('load resize',function() {
 if ($(this).width() > 991) {
     $('#stickyHeader').addClass("sticky01");
 } else {
      $('#stickyHeader').removeClass("sticky01");
 }
});