title: Contained sticky sidebar
body: <p>I need a sidebar that stays with a <strong>fixed position</strong> when the user scrools the page. I came across a lot of solutions and all very clunky, to complex, or too long. I need it simple and efficient. I tried and made this:</p>
  
  <pre><code>var length = $( '#container' ).height() - $( '#stick' ).offset().top - parseFloat($( '#stick' ).css( 'marginTop' ).replace(/auto/, 0));
  
  $(window).scroll(function () {
  
      var scroll = $(this).scrollTop();
  
      if (scroll &lt; $( '#container' ).offset().top) {
        $( '#stick' ).removeAttr("style");
      }
      else if (scroll &gt; length) {
        $( '#stick' ).css('position', 'absolute');
      }
      else {
        $( '#stick' ).css({"position":"fixed", "top":"0", "right":"0"});
      }
  });
  </code></pre>
  
  <p>I made this with the help of <a href="http://jqueryfordesigners.com/fixed-floating-elements/" rel="nofollow">Remy Sharp screencast</a> and <a href="http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom" rel="nofollow">waypointarts blog post</a></p>
  
  <p>When the #container gets at the end of viewport the #stick stops scrolling (the "fixed" position is removed), the problem is that it disapears and does not stay with absolute position in that location, and this behaviour distracts the user.</p>
  
  <p><strong>How can I make the #stick sidebar be absolutely positioned in the bottom of #container instead of disappearing?</strong> Also do you think my code could be perfected someway?</p>
  
  <p>I'm amateur and start using jquery one month now so you will find a lot of mistakes here...</p>
  
  <p>Thank you.</p>