title: Adding class on scroll with jquery
body: <p>I currently have a <a href="/questions/tagged/jquery" class="post-tag" title="show questions tagged &#39;jquery&#39;" rel="tag">jquery</a> command to change the background of my navigation once it has scrolled beyond a certain point. It's based on the number of pixels scrolled, however I would like it to be based on viewport height so that it is responsive. Is this possible. Here is what I have at the moment</p>
  
  <pre><code>$(window).scroll(function(){
      var fromTopPx = 1080; // distance to trigger
      var scrolledFromtop = jQuery(window).scrollTop();
      if(scrolledFromtop &gt; fromTopPx){
          $('header').addClass('scrolled1');
      }else{
          $('header').removeClass('scrolled1');
      }
  });
  </code></pre>