title: issue removing ScrollTop function for mobile devices
body: <p>I am having some difficulty in responsive design I have a sticky navbar effect for the desktop version of my website which is perfect however on a mobile device the sticky navbar hinders the users experience. When I scroll down the navbar displays as it should but the background colour of the sticky nav hinders the visibility of the text which is on the screen. I do want for the background colour of the sticky nav to appear only when the user selects the mobile hamburger icon and not for the background to come as soon as it scrolls down which is annoying. Thank you for your help in advance.</p>
  
  <p>I have tried to set the class to display none however this does work but it disables the sticky navbar on BOTH the desktop and mobile when I onl want to disable the sticky navbar background to be disabled ONLY when the user scrolls but for it to appear when the hamburger icon is selected.</p>
  
  <p><strong>js</strong></p>
  
  <pre><code>$(window).on("scroll", function() {
      if ($(window).scrollTop()) {
          $('nav').addClass('lightgrey');
      } else {
          $('nav').removeClass('lightgrey');
      }
  
  });
  </code></pre>
  
  <p><strong>css</strong> </p>
  
  <pre><code>nav.lightgrey {
           height: 400px;
          }       
  </code></pre>
  
  <p>the expected outcome is to allow the class in the code called nav.lightgrey show only when the user selects the mobile hamburger.</p>