title: How to stop scrolling of inner div when end of outer div is reached
body: <p>I have a inner <strong>div(cube)</strong> on my side bar <strong>div(right)</strong>. The <strong>div(cube)</strong> scrolls and have 3 divs in it. I want it to stop scrolling when the sidebar <strong>div(right)</strong> end is reached. But instead of stopping it crosses sidebar end.</p>
  
  <p>Scroll function code</p>
  
  <pre><code>$(document).ready(function() {
              $('.cube').scrollToFixed({
                  limit: $('end-sticky').offset().top - $('.cube').outerHeight(true),
                  zIndex: 999,
                  fixed: function() {  },
              });
  </code></pre>
  
  <p>html code</p>
  
  <pre><code>&lt;div class="right"&gt; //main div (sidebar)
          &lt;div class="cube" style="margin:0;"&gt; //scrolling div
  
  &lt;/div&gt;
  
  &lt;div&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>#container .right{float:right;padding:0;width:350px;height:100%;}
  
  #container .right .cube{margin: 0 10px 10px;}
  </code></pre>