title: Bottom floating div inside a container (like in Facebook messages) - Take 2
body: <p>I need to have a floating div inside a container. When I move the scroll bars it should move accordingly INSIDE a specified container div. I found something similar here: <a href="http://www.mkyong.com/jquery/mashable-floating-effect-example-with-jquery/" rel="nofollow">http://www.mkyong.com/jquery/mashable-floating-effect-example-with-jquery/</a> except in my case it needs to be floated inside another div/container AND it should stick to the bottom of the page. So for example, when I scroll from bottom to top the floated div should not move up until the bottom of the browser window "touches" it, Then it should start moving until I reach the top of the container div's top.</p>
  
  <p>I found another example here: <a href="http://net.tutsplus.com/tutorials/javascript-ajax/spotlight-constrained-stickies-with-jquer/" rel="nofollow">Spotlight: Constrained Stickies with jQuery</a>
  but this also starts the floater at the TOP of the containing element. not sure how to modify it.</p>
  
  <p>Here is what i have so far: <a href="http://jsfiddle.net/CCpJg/25/" rel="nofollow">http://jsfiddle.net/CCpJg/25/</a></p>
  
  <p>thanks</p>
  
  <p>Here is the solutions by William Niu: (link below)</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="page"&gt;
      &lt;div id="header"&gt;&lt;h1&gt;header&lt;/h1&gt;&lt;/div&gt;
  
      &lt;div id="body"&gt;
          &lt;h1&gt;content top -&gt; when scrolling up the box should STOP here (at the line right above this text)&lt;/h1&gt;
  
          &lt;div id="floating-box"&gt;&lt;/div&gt;
          &lt;span style="position: absolute; bottom: 0; "&gt;content bottom -&gt; when scrolling down the box should STOP here (at the line right below this text)&lt;/span&gt;
  
      &lt;/div&gt;
      &lt;div id="footer"&gt;&lt;h1&gt;footer&lt;/h1&gt;&lt;/div&gt;
      &lt;div id="debug"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#floating-box{
      width:90px;
      height:200px;
      border:1px solid red;
      background-color:#BBBBBB;
      position:absolute;
      bottom: 0;
      z-index:1;
  }
  
  #page{
      width:800px;
      margin:0 auto;
  }
  #header{
      border:1px solid blue;
      height:1010px;
      margin:8px;
  }
  #body{
      border:1px solid blue;
      height:540px;
      margin:8px;
      position: relative;
  }
  #footer{
      border:1px solid blue;
      height:1500px;
      margin:8px;
  }
  h1,h2{
      padding:16px;
  }
  
  #debug {
      position: fixed;
      bottom: 0;
      right: 0;
      height: 100px;
      width: 100px;
      color: red;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var windowHeight = $(window).height();
  
  var $box = $('#floating-box');
  var $parent = $('#body');
  var parentAbsoluteTop = $parent.offset().top;
  var parentAbsoluteBottom = parentAbsoluteTop + $parent.height();
  var topStop = parentAbsoluteTop + $box.height();
  
  $(window).scroll(function(event) {
      var windowBottom = $(window).scrollTop() + windowHeight;
  
      if (windowBottom &lt; topStop)
          $box.css({
              position: 'absolute',
              top: '0px',
              bottom: 'auto'
          });
      else if (windowBottom &gt;= topStop &amp;&amp; windowBottom &lt;= parentAbsoluteBottom)
          $box.css({
              position: 'fixed',
              top: 'auto',
              bottom: '0px'
          });
      else
          $box.css({
              position: 'absolute',
              top: 'auto',
              bottom: '0px'
          });
  });
  </code></pre>