How to build floating menu bar when scroll down

Question

When I scrolled down site display black menu bar at the top look like float bar. but I think there's jquery involved with this. I have tried CSS but seems not working for me like the way i want it to

#menucontainer {     position:fixed;     top:0;     height: 250px }  #firstElement {     margin-top: 250px } 

Here is the website basic idea of what I would like the menu to be like:

http://avathemes.com/WP/Hexic/

Answer 1

Wrap your menu in an div or section with an ID or class.

#yourID.fixed {     position: fixed;     top: 0;     left: 0;     z-index: 1;     width: 100%;     border-bottom: 5px solid #ffffff; }  //STICKY NAV $(document).ready(function () {     var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100));   $(window).scroll(function (event) {     // what the y position of the scroll is     var y = $(this).scrollTop();      // whether that's below the form     if (y >= top) {       // if so, ad the fixed class       $('#yourID').addClass('fixed');     } else {       // otherwise remove it       $('#yourID').removeClass('fixed');     }   }); }); 

Can't remember where I got this from, so no salutations to me, but it worked for me.