Sticky top

by Kenneth Luplau-Brøgger

HTML

<div class="sticky">
    hejsa
</div>
<div class="content">
    <p>Pellentesque dictum porta nibh, sit amet auctor justo adipiscing quis. Etiam posuere imperdiet metus, ac feugiat neque venenatis vitae. Quisque a augue tortor, quis facilisis purus. Morbi rutrum pharetra nunc non vulputate. Praesent dignissim sodales mi, quis blandit metus aliquam vitae. Nullam venenatis arcu id nunc gravida consequat. Nam in ante risus, congue vehicula arcu. Nam et magna ac dolor rhoncus viverra sed a quam. Etiam non tellus tellus, eget tincidunt quam. Nulla facilisi. Duis rhoncus sem eget libero tristique in rhoncus diam dapibus. Vivamus facilisis luctus suscipit. Quisque eu leo augue. Nunc facilisis ultricies rhoncus. Fusce commodo ligula mauris, et vehicula odio.</p>
    
    <p>Pellentesque dictum porta nibh, sit amet auctor justo adipiscing quis. Etiam posuere imperdiet metus, ac feugiat neque venenatis vitae. Quisque a augue tortor, quis facilisis purus. Morbi rutrum pharetra nunc non vulputate. Praesent dignissim sodales mi, quis blandit metus aliquam vitae. Nullam venenatis arcu id nunc gravida consequat. Nam in ante risus, congue vehicula arcu. Nam et magna ac dolor rhoncus viverra sed a quam. Etiam non tellus tellus, eget tincidunt quam. Nulla facilisi. Duis rhoncus sem eget libero tristique in rhoncus diam dapibus. Vivamus facilisis luctus suscipit. Quisque eu leo augue. Nunc facilisis ultricies rhoncus. Fusce commodo ligula mauris, et vehicula odio.</p>
    
    <p>Pellentesque dictum porta nibh, sit amet auctor justo adipiscing quis. Etiam posuere imperdiet metus, ac feugiat neque venenatis vitae. Quisque a augue tortor, quis facilisis purus. Morbi rutrum pharetra nunc non vulputate. Praesent dignissim sodales mi, quis blandit metus aliquam vitae. Nullam venenatis arcu id nunc gravida consequat. Nam in ante risus, congue vehicula arcu. Nam et magna ac dolor rhoncus viverra sed a quam. Etiam non tellus tellus, eget tincidunt quam. Nulla facilisi. Duis rhoncus sem eget...

CSS

.content {
    margin-top: 50px;
}
body {
    width: 320px;
}
.sticky {
    background: red;
    padding: 20px;
    position: absolute;
    width: 100%;
    top: 0;
    height: 10px;
}
.fixed {
    position: fixed !important;
}

JavaScript

$(document).scroll(function() {
    if ($("body").scrollTop() > 200) {
        $(".sticky").addClass("fixed");
    } else {
        $(".sticky").removeClass("fixed");
    }
});