Sticky menu depending on the specified height

This will get the first layers height and stick the menu when it reaches certain height

by aljon254

HTML

<div id='div1'> Scroll Down </div>
<div id='menuLayer'>Home , About us , Contact Us</div>
<div id='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nulla velit, dignissim non dui sit amet, gravida posuere sem. Vivamus facilisis velit volutpat metus venenatis, vel ultrices neque cursus. Pellentesque eu ipsum nec lorem facilisis faucibus vel at magna. Pellentesque bibendum odio a vulputate fermentum. Sed egestas bibendum eros a congue. Ut tempor ultricies ipsum ut volutpat. Suspendisse rhoncus massa id felis condimentum, sit amet commodo sapien eleifend. Donec velit eros, iaculis sit amet ante sit amet, dapibus ornare nunc. Nullam lobortis nisl magna, eu fermentum turpis dapibus ut. Praesent scelerisque, sem feugiat fringilla lobortis, felis ipsum finibus nibh, sit amet congue lorem lorem et dui. Aenean pellentesque imperdiet ipsum et malesuada. Vivamus mi nunc, venenatis vel aliquam vel, cursus in libero. Aenean eu imperdiet turpis. Donec vitae rutrum ipsum.<br><br>

In pretium sapien a blandit lacinia. Ut eget tellus sed turpis feugiat auctor. Praesent id lorem euismod, dapibus lacus sed, ultrices ligula. Aenean eu sagittis risus. Phasellus ac augue vestibulum, vestibulum ligula vitae, condimentum tellus. Curabitur vel velit tortor. Aliquam rutrum orci non consectetur vulputate. Sed mattis diam lacus, sit amet accumsan diam mollis quis. Sed sodales tempor lacus, vel dapibus ipsum venenatis at. Aliquam ornare ultricies turpis, suscipit scelerisque velit placerat eget. Donec vulputate ante a leo rutrum accumsan. Phasellus bibendum felis sed ornare euismod. Nam sed augue justo. Duis semper sem et metus imperdiet, id suscipit nunc dapibus. Praesent dapibus convallis nulla sit amet viverra. Aenean euismod dolor vel quam accumsan, at pharetra erat pellentesque.<br><br>

Curabitur feugiat hendrerit pharetra. Phasellus iaculis justo condimentum porttitor finibus. Praesent nulla neque, cursus at libero nec, iaculis malesuada ipsum. Curabitur...

CSS

#div1{
    width:100%;
    height:800px;
    background:#333;  
    text-align:center;
    Color:#fff;
}

#menuLayer{
    width:100%;
    height:50px;
    background:#4679BD;    
    top:0px;
    text-align:center;
    line-height:50px;
}

#content{
    width:100%;
    min-height:2000px;
    background:#D8E5CE;    
}

JavaScript

//get the height of div1	
firstLayer = $('#div1').height();	
$(window).on('scroll', function() {
    var y_scroll_pos = window.pageYOffset;
    
    if(y_scroll_pos > firstLayer) {
        $('#menuLayer').css( "position", "fixed" );	        
    }
    
    if(y_scroll_pos < firstLayer) {
        $('#menuLayer').css( "position", "relative" );
				
    }
});