固定位置不能在粘性菜單上工作

我通過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/

謝謝

來源

2016-12-28 FDI

你能理解這一個的jsfiddle？ –

由於某些原因，固定位置不能在網站上工作，如果我爲它製作一個JSFiddle。它會工作 – FDI

添加這個CSS：

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

來源

2016-12-28 08:20:58

這會打破畫布菜單，還有其他解決方案嗎？ – FDI

我想要一段時間 –

使用position: fixed;和top: 0px;應該夠了。

請訪問以下鏈接http://jsfiddle.net/luckmattos/yp8HK/1/

來源

2016-12-28 08:11:25

謝謝，但你沒有回答我的問題，爲什麼它不工作在我的網頁上？ – FDI

請從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。當u刪除此代碼，它工作正常...

，並增加了z-index值

來源

2016-12-28 09:10:15

固定位置不能在粘性菜單上工作

回答

相關問題