title: Resizing needs Refresh
body: <p>So What I am trying to do is I have 3 <code>div</code> each <code>div</code> should scroll over the another <code>div</code> and when it reaches the top it's position should be fixed.</p>
  
  <p>So everything is working fine until we resize the window(It needs refresh of page). 
  How to fix this ? I mean can't we do this without refreshing the page ? </p>
  
  <p>I used resize but it's not working for me. And I'm not sure whether this is the right way of using resize</p>
  
  <p>The <a href="http://jsfiddle.net/Veeraj_P/MyM28/3/" rel="nofollow">JSFiddle</a> copy of my work</p>
  
  <pre><code>var $cache = $('#two');
  var $cache2=$('#three');
  
  var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
  var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
  
  $(window).scroll(function (event) {
      var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
          var vTop2 = $cache2.offset().top - parseFloat($cache2.css('margin-top').replace(/auto/, 0));
   });
  
    $(window).scroll(function (event) {
      var y = $(this).scrollTop();
      if (y &gt;= vTop) {     
        $cache.addClass('stuck');
        $('#one').addClass('stuck');
        $('#two h2').addClass('stuck');     
      } else if(y&gt;=vTop2)
      {
           $('#two h2').removeClass('stuck');
      }
        else {
        $cache.removeClass('stuck');
        $('#one').removeClass('stuck');
         $('#two h2').removeClass('stuck');       
      }
    });
  </code></pre>