title: Is there a way to disable a css class in media queries?
body: <p>I have a css class "fadeout" that I want to disable if viewport width less than 786px
  something like this</p>
  
  <pre><code>@media only screen and (max-width: 786px) {
  .fadeout {doesItWork?:noItDoesNotWork!;}
  }
  </code></pre>
  
  <p>You see the class does something regarding " $(window).scrollTop(); " in jquery which i don't think would be appropriate in mobile devices here is the code I got and it from <a href="https://tympanus.net/Tutorials/FixedFadeOutMenu/" rel="nofollow noreferrer">https://tympanus.net/Tutorials/FixedFadeOutMenu/</a></p>
  
  <pre><code>//fadeout script
  $(function() {
      $(window).scroll(function(){
          var scrollTop = $(window).scrollTop();
          if(scrollTop != 0)
              $('.fadeout').stop().animate({'opacity':'0.2'},400);
          else    
              $('.fadeout').stop().animate({'opacity':'1'},400);
      });
  
      $('.fadeout').hover(
          function (e) {
              var scrollTop = $(window).scrollTop();
              if(scrollTop != 0){
                  $('.fadeout').stop().animate({'opacity':'1'},400);
              }
          },
          function (e) {
              var scrollTop = $(window).scrollTop();
              if(scrollTop != 0){
                  $('.fadeout').stop().animate({'opacity':'0.2'},400);
              }
          }
      );
  });
  </code></pre>
  
  <p>I am open to javascript/jquery/plugin but would prefer a css only solution</p>
  
  <p>Any help much appreciated thanks in advance</p>