Stick div at top after scrolling example v.3

Multiple Elements (like headers in iPhone Contacts)

by Robert Herring

HTML

<div class="wrapper">
    <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 class="sticky">This will stay at top of page</div>
    <div class="sticky-anchor"></div>
    <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 lobortis tempor pulvinar. Nunc sit amet nulla urna. Phasellus...

CSS

html, body {
    width:100%;
}
.wrapper {
    width:100%;
    position:relative;
}
p {
    margin: 1em auto;
    padding:0 5%;
    width: 90%;
}
.sticky {
    padding: 10px;
    width: 80%;
    background: linear-gradient(to bottom, rgba(71, 71, 71, .9) 0%, rgba(31, 31, 31, .9) 100%) repeat scroll 0% 0% transparent;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
    text-align: center;
    position:absolute;
    left:10%;
    
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    transition: all 100ms linear;
}
.sticky.stick {
    position: fixed;
    width:100%;
    top: 0;
    left:0;
    z-index: 10000;
    border-radius: 0;
    
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    transition: all 100ms linear;
}

JavaScript

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    
    $('.sticky-anchor').each( function () {
        var div_top = $(this).offset().top,
            heightFix = $(this).prev().outerHeight();
        
        $(this).height(heightFix);
        $(this).prev().css({'top': '-' + heightFix});
        
        if (window_top > div_top) {
            $(this).prev().addClass('stick');
        } else {
            $(this).prev().removeClass('stick');
        }
        
        if ($(this).prevAll("div.sticky-anchor:first").length) {
            if (window_top > (div_top - heightFix)) {
                $(this).prevAll("div.sticky-anchor:first").prev('.sticky').css({'top': (window_top - (div_top - heightFix))* -1});
            }
        }
    });
}

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