[英]position fixed not working on sticky menu
我通過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/
謝謝
添加此css:
.scotch-panel-canvas {
transform: none !important;
-ms-transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
}
請從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
值
使用position: fixed;
和top: 0px;
應該夠了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.