jquery - 谷歌浏览器 : How can I keep an element's z-index after its position is dynamically set to 'fixed' ?

Question

好吧，最烦人的是一周前它还在使用谷歌浏览器，然后突然就停止工作了。

这是我的问题:我有一些绝对定位的 div，它们在滚动到某个点后变为固定位置。该部分工作正常，但我在那些 div 内的元素上设置了一些 z-index，当位置更改为固定时这些元素会被覆盖。

see the problem

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。

我必须以某种方式使这项工作跨浏览器...有人可以帮忙吗？

Answer 1

Chrome 最近更改了呈现固定位置元素的方法。使用 jQuery .css 来设置 zindex。