0

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

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

看到问题

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);
    }
});

如果我的问题听起来仍然令人困惑，请自己检查一下：我的网站的问题。使用chrome并向下滚动，它适用于firefox和ie。

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

4

2 回答 2

1

当外部 div 为 时，Chrome 将内部 div 移动到同一层position: fixed。

我能想到的最简单的解决方法是将两个 div（greenSide...Top 和 greenSide...Bottom）分开，而不是单独嵌套和定位它们。

<div id="rightSide">
    <div id="greenSideRightTop"></div>
    <div id="greenSideRightBottom"></div>
</div> <!-- end rightSide -->
于 2012-10-01T16:22:29.583 回答
1

Chrome 最近更改了渲染固定位置项目的方法。改用 jQuery.css来设置 zindex。

于 2012-10-01T17:37:16.797 回答