Fix Div to Top on Scroll

Sticky header

by ashleycam3ron

HTML

<div class="content"></div>
<div class="fixme">Scroll here</div>

CSS

body { height: 3000px; }
.content { height: 100px; }
.fixme { background: green; color: white; text-align: center; width: 100%; }

JavaScript

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }
});