[英]position fixed not working on sticky menu
I added this class ".sticky" by javascript to the nav but sticky menu not working correctly. 我通过javascript将此类“.sticky”添加到导航但粘性菜单无法正常工作。
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
-webkit-transform: none;
transform: none;
}
javascript code 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();
});
can you please check the page http://www.chainreaction.ae/alayam/ 请你查看页面http://www.chainreaction.ae/alayam/
thank you 谢谢
Add this css: 添加此css:
.scotch-panel-canvas {
transform: none !important;
-ms-transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
}
Please remove inline styles from the scotch-panel-canvas
div then it works fine... 请从scotch-panel-canvas
div中删除内联样式然后它工作正常...
remove this style: style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"
删除此样式: style="position: relative; height: 100%; width: 100%; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; transition: all 300ms ease;"
i don't how this inline css coming from but you should remove this. 我不知道这个内联css是如何产生的,但你应该删除它。 I think this style coming from some jquery. 我认为这种风格来自一些jquery。 When u remove this code it works fine... 当你删除这个代码它工作正常...
and also increase the z-index
value 并且还增加z-index
值
Using position: fixed;
使用position: fixed;
and top: 0px;
和top: 0px;
should be enough. 应该够了。
Please see this link http://jsfiddle.net/luckmattos/yp8HK/1/ 请看这个链接http://jsfiddle.net/luckmattos/yp8HK/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.