title: Add stickiness on scrolling
body: <p>I have a design in stripes :</p>
  
  <p>html :</p>
  
  <pre><code>&lt;div class='resize' style='background-color:black;'&gt;&lt;/div&gt;
  &lt;div class='resize' style='background-color:red;'&gt;&lt;/div&gt;
  &lt;div class='resize' style='background-color:green;'&gt;&lt;/div&gt;
  &lt;div class='resize' style='background-color:blue;'&gt;&lt;/div&gt;
  &lt;div class='resize' style='background-color:grey;'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>js :</p>
  
  <pre><code>$(function() {
      $('.resize').css({
          'height': (($(window).height()))
      });
  
      $(window).resize(function() {
          $('.resize').css({
              'height': (($(window).height()))
          });
      });
  });
  
  $(window).height();
  </code></pre>
  
  <p>Here is a jsfiddle : <a href="http://jsfiddle.net/Awt7q/" rel="nofollow">http://jsfiddle.net/Awt7q/</a></p>
  
  <p>I would like to add stickiness on scrolling when the users reach a new stripe, so that when the users scroll they don't go to quickly. The stripes need to stick a bit to the top of the screen.</p>
  
  <p>Here is an example of what I would like to do : <a href="http://timmytompkinsapp.com" rel="nofollow">http://timmytompkinsapp.com</a></p>
  
  <p>I really don't get how I could create this stickiness effect.</p>
  
  <p>Thank you very much for your help !</p>