Fixed position does not work in sticky menu

Question

I added this “.sticky” class from javascript to nav, but the sticky menu is not working correctly.

.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
-webkit-transform: none;
transform: none;
}

javascript code

//sticky menu
 var stickyNavTop = $('.main-navbar').offset().top;
 var stickyNav = function(){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) { 
        $('.main-navbar').addClass('sticky');
    } else {
        $('.main-navbar').removeClass('sticky'); 
    }
};
stickyNav();
$(window).scroll(function() {
  stickyNav();
});

You can check out the page http://www.chainreaction.ae/alayam/

Thank you

Answer 1

Add this css:

.scotch-panel-canvas {
    transform: none !important;
    -ms-transform: none !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
 }

Answer 2

Remove inline styles from scotch-panel-canvasdiv then it works fine ...

remove this style: style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"

I do not understand how this built-in css comes from, but you have to remove it. I think this style comes from some jquery. When u remove this code, it works fine ...

and also increase the value z-index

Answer 3

position: fixed; top: 0px; .

, http://jsfiddle.net/luckmattos/yp8HK/1/