我有一个带有固定定位 flexslider 的网页。我使用以下代码使 flexslider 固定位置并将滑块添加为背景。
.flexslider {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
height: 100%;
width: 100%;
z-index: -1;
border: none;
}
并且网页具有粘性导航，当用户滚动到视口高度一半的顶部高度时，该导航将固定定位。我通过使用以下 jQuery 和 CSS 来做到这一点：
jQuery：
$(window).scroll(function() {
var scrollTop = $(window).height()/2;
if ($(window).scrollTop() >= scrollTop) {
$('.main-header').removeClass('main-header ').addClass('fixed-header');
}
if ($(window).scrollTop() < scrollTop) {
$('.fixed-header').removeClass('fixed-header').addClass('main-header ');
}
})
CSS：
.fixed-header {
position: fixed;
top: 0;
left: 0;
}
我的 html 标记是：
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/image1.jpg" />
</li>
<li>
<img src="images/image2.jpg" />
</li>
<li>
<img src="images/image3.jpg" />
</li>
</ul>
</div>
<header class="main-header">
<h1>heading</h1>
<p>
paragraph
</p>
<nav class="site-navigation">
<ul>
<li>
<a class="active" href="#slide1">home</a>
</li>
<li>
<a href="#slide2">about</a>
</li>
<li>
<a href="#slide3">services</a>
</li>
<li>
<a href="#slide4">contact</a>
</li>
<li>
<a href="#slide5">elements</a>
</li>
</ul>
</nav>
</header>
问题是导航没有固定下来，当它在 chrome 中滚动时它会上升。如果我改变 flexslider 的固定位置，它工作正常。此代码在除 Chrome 之外的所有主要浏览器中都能完美运行。
如何解决此问题以及是否有另一种设计粘性导航的方法？