Fix menubar while scrolling

by surfine

HTML

<div class="titleWrap">
    <span id="title">Surfine - Fixaal</span></div>
<header class="navbar">
    <span class="action">Home</span>
    <span class="action">News</span>
    <span class="action">Sign up</span>
</header>
<div id="content">
    The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />The navigation bar above will automatically fix itself to the top of the page if scrolled more than 180px (the height of the header + the space I left in between the header and navigation bar) <br /> <br />
</div>

CSS

body {
    font-family: Arial;
}
.titleWrap {
    width: 100%;
    height: 150px;
    background: #3d3d3d;
    font-size: 36px;
    color: #FFF;
}
#title {
    position: absolute;
    top: 30px; left: 50px;
}
.navbar {
    background: #10c4d3;
    position: relative;
    top: 20px;
    height: 60px; width: 100%;
    display: inline-block;
    z-index: 1;
}
.action {
    height: 60px; width: 60px;
    position: relative;
    left: 10px; top: 20px;
    display: inline-block;
}
#content {
    position: absolute;
    top: 260px;
    height: 750px; width: 80%;
    padding: 20px;
    background: #c3c3c3;
}

JavaScript

$(document).ready(function() {
    y = $('.navbar').position().top;
});

$(document).scroll(function() {
    if($(window).scrollTop() > y){
        $('.navbar').css({'position': 'fixed', 'top': '0'});
        $('.logo').css({'display': 'inline-block'});
    }
    else {
        $('.navbar').css({'position': 'relative', 'top': '20px'});
        $('.logo').hide();
    }
});