Stick div at top after scrolling example

An example for fiddling.

by Faisal Khan Janjua

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
    lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
    lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
    Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
    non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
    Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
    ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
    gravida.</p>
<div id="sticky-anchor">Sticky Anchor</div>
<div id="sticky">This will stay at top of page</div>
<div class="content-holder">
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus...

CSS

#sticky {
    padding: 0.5ex;
    width: 200px;
    height:300px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 10px;
    float:left;
}
#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10;
}
.content-holder {
  margin-left:225px;
}
body {
    margin: 1em;
}
p {
    margin: 1em auto;
}
#footer {
  width:100%;
  height:600px;
  background:#ccc;
  z-index:999999
 }

JavaScript

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();
    
    var padding = 20;  // tweak here or get from margins etc
    
    if (window_top + div_height > footer_top - padding)
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
  sticky_relocate();
  jQuery(window).scroll(function() {
    sticky_relocate();
  });
});