title: Can't get fixed div to stop above the footer, what am I missing?
body: <p>I have a side bar div that is fixed until a certain scroll/page height and then it becomes <code>position:absolute</code>.</p>
  
  <p>My problem is that, when it loads in, it's at the right position and height, until I scroll and then it moves (partly due to the <code>jQuery</code> function). When it moves however, it makes it so it doesn't stop at the footer, but instead continues past it.</p>
  
  <p>I am building this on a COS so I can't exactly recreate the problem in JSFiddle, but I can link you to the page.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/*fixed/absolute div*/
  .widget-type-post_listing{
      right:0;
      width:50px;
      position:absolute;
      display;block;
      background:yellow;
      height:50px;
     }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(function(){
      var container = $('.widget-type-post_listing');
      var minTop = $('.header-container-wrapper').outerHeight();
      var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight(); 
  
      $(document).scroll(function() {
          container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
      });
  });
  </code></pre>
  
  <p>Here is the JS Fiddle showing a working example: <strong><a href="http://jsfiddle.net/9mp8spkd/" rel="nofollow">JSFiddle</a></strong>. You can see that the yellow box (fixed/abso.div) will stick on page until scrolling to footer.</p>
  
  <p>As I said above, to see the exact problem, visit the working page: <strong><a href="https://preview.hs-sites.com/_hcms/preview/template/multi?template_layout_id=3591379871&amp;is_buffered_template_layout=true&amp;portalId=494351&amp;tc_deviceCategory=DESKTOP" rel="nofollow">Working Page</a></strong></p>
  
  <p>Thanks for the help everyone!</p>