[英]position fixed header not working on my website
This my website https://bed-sheet-2.myshopify.com/ ,Added fixed position header css 这是我的网站https://bed-sheet-2.myshopify.com/ ,添加了固定位置标头css
.site-header{z-index:110;position:fixed;width:100%;left:0;}
It's not working on my website, How solve this problem. 它不能在我的网站上运行,如何解决这个问题。 I search across stackoverflow, no solve.
我搜索stackoverflow,没有解决。
试试这个: .site-header{z-index:110;position:fixed;top:0px;left:0px;width:100%;}
你需要添加px
和一个top
值。
try this. 尝试这个。 margin need to set 0px auto .site-header{width:100%;
margin需要设置0px auto .site-header {width:100%; margin:0px auto;
保证金:0px auto; position: fixed;
位置:固定; top:0px}
顶:0像素}
Demo for that: https://codepen.io/Guilh/pen/JLKbn 演示: https : //codepen.io/Guilh/pen/JLKbn
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
var mn = $(".main-nav");
mns = "main-nav-scrolled";
hdr = $('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > hdr ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
</script>
.main-nav{
position: relative;
}
.main-nav {
background: #fff;
height: 80px;
z-index: 150;
margin-bottom: -80px;
box-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}
header,.main-nav-scrolled {
position: fixed;
width: 100%;
top: 0;
}
<nav class="main-nav">
<a href="#">Nav Link 1</a>
<a href="#">Nav Link 2</a>
<a href="#">Nav Link 3</a>
<a href="#">Nav Link 4</a>
</nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.