Pin menu to top of page when scrolling down

Question

I have a div with height 100% and after it a navbar. I would like that when you scroll down the page the navbar fixed at the top of the page.

CSS

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #27ae60;
    text-align:center;
    z-index: 99;
    position: relative;
}
ul.navbar li {
    display: inline;
}
ul.navbar li:not(:nth-last-child(2)) {
    border-right: 1px solid #079342;
}
ul.navbar li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    font-size: 100%;
    text-transform: uppercase;
    font-weight: 300;
}
ul.navbar li a:hover { 
    color: #e6e6e6 !important;
}
ul.navbar li.navbar-icon {display: none;}
@media screen and (max-width:680px) {
  ul.navbar{text-align:left;}
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.navbar-icon {
    float: right;
    padding-bottom: -5px;
    display: inline-block;
  }
  ul.navbar li.navbar-icon a {
    padding-bottom: 17px;
  }
}
@media screen and (max-width:680px) {
    ul.navbar.navbar-responsive {
        position: relative;
    }
    ul.navbar.navbar-responsive li.navbar-icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.navbar.navbar-responsive li {
        float: none;
        display: inline;
    }
    ul.navbar.navbar-responsive li a {
        display: block;
        text-align: left;
    }
    ul.navbar li:first-child {
        border-right: none;
    }
}

HTML

<ul class="navbar" id="navbar">
    <li>
        <a href="#">Item 1</a>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
    <li>
        <a href="#">Item 3</a>
    </li>
    <li>
        <a href="#">Item 4</a>
    </li>
    <li>
        <a href="#">Item 5</a>
    </li>
    <li class="navbar-icon">
        <a href="javascript:void(0);" style="font-size:15px;" onclick="menuToggle()"><i class="ion-navicon"></i></a>
    </li>
</ul>

Answer 1

See working here Jsfiddle.

Uses the function scroll, detects the event of scrolling the page, checks whether the size rolled down is higher the height of the navbar. If larger, add the class that forces it to stay at the top - if not, remove the class if it has ever been assigned.

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 60)
        {
            $('#navbar').addClass('navbar-fixed-top', 500);
        } else {
            $('#navbar').removeClass('navbar-fixed-top', 500);  
        }
    });
});

Here the CSS, with the class mentioned above. The class forces the position to be fixed at the top and the horizontal size to be extended to 100%.

.navbar-fixed-top {
    position: fixed !important;
    top: 0;
    width: 100%;
}