auto-fixed-navbar-then-scroll.html

auto-fixed-navbar-then-scroll.html

<style>
  menu {
    background:#345;
    color:#FFF;
    height:2em;
    padding:.5em;
    position:absolute;
    top:150px;
    width:100%;
}
.fixed {
    position:fixed;
    top:0;
}
</style>

<div class="menu">Menu</div>
<br />
<br />
<br />
<br />
<br />
<br />


<script>
/* Dynamic top menu positioning
 *
 */

var num = 150; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
</script>