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.