Sticky header

by joplomacedo

HTML

<div id="bar">47 px high bar</div>
<div id="header" class="header1">
    <ul>
        <li>Nav1</li>
    </ul>
</div>

CSS

#bar {
    height: 47px;
}

#header {
    background: blue;
}

#header.header2 {
    position: fixed;
    top: 0;
    width: 100%;
    background: yellow;
}





body {
    height: 900px;
}

JavaScript

var $window = $(window),
        $header = $('#header');
                
    $window.on('scroll', function () {
        $header.toggleClass('header2', $window.scrollTop() >= 47);
    });