позиция фиксированная не работает над липким меню

Question

Я добавил этот класс «.sticky» от javascript к nav, но липкое меню работает неправильно.

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

Javascript код

//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(); 
}); 

Пожалуйста, вы можете проверить страницу http://www.chainreaction.ae/alayam/

спасибо

Answer 1

Добавить CSS:

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

Answer 2

Использование position: fixed; и top: 0px; должно быть достаточно.

Пожалуйста, смотрите ссылку http://jsfiddle.net/luckmattos/yp8HK/1/

Answer 3

Пожалуйста, удалите встроенные стили из scotch-panel-canvas DIV, то он работает отлично ...

удалить этот стиль: style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"

Я не понимаю, как это происходит, но вы должны удалить это. Я думаю, что этот стиль исходит из некоторого jquery. Когда у удалить этот код он прекрасно работает ...

, а также увеличить значение z-index