好吧,最烦人的是一周前它还在使用谷歌浏览器,然后突然就停止工作了。
这是我的问题:我有一些绝对定位的 div,它们在滚动到某个点后变为固定位置。该部分工作正常,但我在那些 div 内的元素上设置了一些 z-index,当位置更改为固定时这些元素会被覆盖。
html:
<div id="leftSide">
<div id="leftSideBottom"></div>
<div id="leftSideTop">
<div id="nav">
<a href="#home" class="home"></a>
<a href="#about" class="about"></a>
<a href="#work" class="work"></a>
<a href="#blog" class="blog"></a>
<a href="#connect" class="connect"></a>
</div>
</div> <!-- end leftSideTop -->
</div> <!-- end leftSide -->
<div id="rightSide">
<div id="rightSideBottom"></div>
<div id="rightSideTop">
</div> <!-- end rightSideTop -->
</div> <!-- end rightSide -->
CSS:
#leftSide {
position: absolute;
margin-top: 160px;
top: 0;
left: -20px;
}
#rightSide {
position: absolute;
margin-top: 160px;
top: 0;
left: 880px; // ie breaks if I use right: -20px
}
#rightSideTop, #leftSideTop {
position: absolute;
width: 100px;
height: 600px;
}
#rightSideBottom, #leftSideBottom {
position: absolute;
width: 40px;
height: 600px;
right: 0; // leftSideBottom will have this set to left: 0, just combine code to simplify
top: 0;
z-index: -100;
}
.fixed {
position: fixed;
top: 150px;
}
jQuery:
var aboutTop = $("#about").offset().top;
var connectTop = $("#connect").offset().top;
$(window).scroll(function(){
var y = $(this).scrollTop();
if(y >= aboutTop && y < connectTop){
$("#greenSideLeftTop,#greenSideLeftBottom").addClass("fixed");
$("#greenSideRightTop,#greenSideRightBottom").addClass("fixed");
}
else if(y >= connectTop){
$("#greenSideLeftTop,#greenSideLeftBottom").removeClass("fixed");
$("#greenSideRightTop,#greenSideRightBottom").removeClass("fixed");
$("#leftSide").css("top",connectTop - 1080);
$("#rightSide").css("top",connectTop - 1080);
}
else{
$("#greenSideLeftTop,#greenSideLeftBottom").removeClass("fixed");
$("#greenSideRightTop,#greenSideRightBottom").removeClass("fixed");
$("#leftSide").css("top",aboutTop - 1080);
$("#rightSide").css("top",aboutTop - 1080);
}
});
如果我的问题听起来仍然令人困惑,请自行检查:my website's problem .使用 chrome 并向下滚动,它适用于 firefox 和 ie。
我必须以某种方式使这项工作跨浏览器...有人可以帮忙吗?
最佳答案
Chrome 最近更改了呈现固定位置元素的方法。使用 jQuery .css
来设置 zindex。
关于jquery - 谷歌浏览器 : How can I keep an element's z-index after its position is dynamically set to 'fixed' ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12676729/