title: Freeze element (position:fixed) for specific scroll range
body: <p>I'm working on this site (<a href="http://styleguide.co/medhelp/" rel="nofollow">http://styleguide.co/medhelp/</a>) that has 5 sections. For one of the sections (Styles), I've got a sidenav I'm trying to get to stick in the visible frame only as long as users are scrolling in that section.</p>
  
  <p>Here's what I've done thus far - I'm telling the section title &amp; sidenav to stick after the top of the section has begun:</p>
  
  <pre><code>$(window).scroll(function(event) {
  
      var sw = $('.fixed'),
      pg = $('.styles'),
      diff = pg[0].offsetTop - window.pageYOffset;
  
      if (diff &lt; 80 ) {
          $('.fixed').css('position', 'fixed');
          $('.fixed').css('top', '160px');
          $('.styles').css('position', 'fixed');
          $('.styles').css('top', '70px');
  
      }
      else {
          $('.fixed').css('position', 'relative');
          $('.fixed').css('top', '0px');
          $('.styles').css('position', 'relative');
          $('.styles').css('top', '0px');
      }
  });
  </code></pre>
  
  <p>I can't seem to figure out a good way to make the section title "Style" and the sidenav appear/disappear while I scroll to/from that section. Any advice? What could I do better? A simple solution demo in jsfiddle would really help!</p>
  
  <p>Please click on this link &amp; scroll down/up to know what I'm referring to: <a href="http://styleguide.co/medhelp/" rel="nofollow">http://styleguide.co/medhelp/</a></p>