[英]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.