Question

我通过javascript将此类“.sticky”添加到导航但粘性菜单无法正常工作。

.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

请从scotch-panel-canvas div中删除内联样式，然后才能正常工作......

删除此样式：style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"

我不知道这个内联css是如何产生的，但你应该删除它。我认为这种风格来自一些jquery。删除此代码时，它可以正常工作......

并且还会增加z-index值

Answer 3

使用position: fixed;和top: 0px;就足够了。

请参阅此链接http://jsfiddle.net/luckmattos/yp8HK/1/

固定的位置不适用于粘性菜单

3 个答案: