Dynamic Top Menu Positioning

HTML

<div class="navbar">Scroll Nav</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus purus lectus. Aenean vel feugiat quam. Ut placerat, tortor tincidunt malesuada faucibus, dolor justo tincidunt tortor, at aliquam risus nisi ac lorem. Quisque eu turpis in arcu iaculis ultrices. Morbi at viverra nibh, at dapibus ante. Vivamus ut justo nec urna bibendum tempus ut posuere diam. Cras sem ligula, semper eu arcu quis, condimentum pharetra nisi. Suspendisse vestibulum quis nibh at dictum. Morbi arcu quam, sollicitudin a ullamcorper vitae, mattis in nibh. Fusce id nisl elementum leo convallis sodales. Nam eget gravida lacus.</p>
    <p>In metus ex, tristique nec ex vel, facilisis venenatis eros. Aliquam tempus, quam bibendum accumsan laoreet, risus odio vulputate nunc, sed varius felis enim in arcu. Fusce gravida ipsum tellus, in tristique purus pulvinar id. Praesent vulputate lorem tortor, vel tincidunt arcu accumsan ac. Cras molestie sem sem, et rutrum turpis semper sit amet. Aenean augue purus, imperdiet eget tempus vitae, suscipit eu odio. Etiam luctus est sit amet sapien faucibus, vel imperdiet ipsum sodales. Mauris viverra ut odio ut congue. Praesent vitae varius nunc. Pellentesque eleifend est sem, et fermentum nisl sagittis quis. Curabitur fermentum tempor aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Quisque aliquet lobortis magna sed laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque bibendum, neque eu ornare eleifend, dui ligula euismod ipsum, a suscipit orci risus at justo. Curabitur posuere ante et massa varius, eu lacinia mauris vestibulum. Aenean consectetur nibh at augue tempor, sit amet luctus purus vestibulum. Ut efficitur, neque eget posuere feugiat, nulla diam molestie nisl, quis aliquet ante elit ac eros. Proin tristique felis risus, eget molestie felis pretium ut. Ut...

CSS

.navbar {
    background:#000;
    color:#fff;
    height:60px;
    padding:10px;
    position:absolute;
    top:0px;
    width:100%;
    z-index:100;
}
.no-scroll {
    position:fixed;
    top:0;
}
.content {
    position:relative;
    top:100px;
    z-index:0;
}

JavaScript

var num = 50;

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