Fix Div to Bottom

Lighter option than scrolltofixed

by sstedman

HTML

<div id="header">Header</div>
<div id="wrapper">
    <div id="scroll-container">
        <div id="fixed-content">Sidebar Text here!</div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">Footer</div>

CSS

#header {
    background: #c2c2c2;
    height: 50px;
}
#wrapper {
    position: relative;
    min-height: 300px; /* Just as an example */
    width: 100%;
    padding: 0;
    margin: 0;
}
#scroll-container {
    position: absolute;
    background: #d7d7d7;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#fixed-content {
    background: #0096d7;
    width: 100%;
    color: #fff;
}
.clear {
    clear: both;
}
#footer {
    background: #c2c2c2;
    height: 500px; /* Just as an example */
}

JavaScript

$(document).ready(function () {
  var length = $('#scroll-container').height() - $('#fixed-content').height() + $('#scroll-container').offset().top;

  $(window).scroll(function () {
    var scroll = $(this).scrollTop();
    var height = $('#fixed-content').height() + 'px';

    if (scroll < $('#scroll-container').offset().top) {
      $('#fixed-content').css({
        'position': 'absolute',
        'bottom': '0'
      });
    }
    else if (scroll > length) {
      $('#fixed-content').css({
        'position': 'absolute',
        'top': 'auto',
        'bottom': '0'
      });
    }
    else {
      $('#fixed-content').css({
        'position': 'fixed',
        'bottom': '0',
        'height': height
      });
    }
  });
});