How to disable jQuery properties in media query css

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 :)

"I want to remove or disable the properties if it reaches to 991px size" What is "it"? Do you mean window.innerWidth? — guest271314
– guest271314, Commented Apr 20, 2017 at 3:19
Nope. What I want to achieve is that when the browser is in 991px width all my jQuery properties will be disable — Melvin Rey
– Melvin Rey, Commented Apr 20, 2017 at 3:24

Marketingexpert · Accepted Answer · 2017-04-20 03:21:04Z

0

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

answered Apr 20, 2017 at 3:21

Marketingexpert

1,4614 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Coker · Accepted Answer · 2017-04-20 04:21:12Z

0

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

edited Apr 20, 2017 at 4:21

answered Apr 20, 2017 at 3:24

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

5 Comments

Melvin Rey Over a year ago

Hello, I want to remove all of these in 991px: sticky01, stSize, stNavSize, stSize2, stNavSize2

Michael Coker Over a year ago

"remove all of these" what do you mean? be more specific please.

Melvin Rey Over a year ago

Opps. I apologize. What i want to achieve is that when it reaches to 991px all the class and id that I made in jquery will be disable to stop the events from continuing

Michael Coker Over a year ago

@MelvinRey then either use the media query example I gave to override the styles with whatever you wanted to do, or use jQuery to remove the classes/ID's that you applied.

guest271314 Over a year ago

991px is not a number.

Collectives™ on Stack Overflow

How to disable jQuery properties in media query css

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related