0

さて、これについて最も厄介なのは、1週間前にグーグルクロームで動作していたのに、突然動作を停止したことです。

これが私の問題です。特定のポイントを超えてスクロールした後、固定位置に変化する絶対位置の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);
    }
});

それでも問題がわかりにくい場合は、自分で確認してください：私のWebサイトの問題。クロムを使用して下にスクロールすると、Firefoxなどで機能します。

どういうわけか、この作品をクロスブラウザにする必要があります...誰か助けてもらえますか？

4

2 に答える 2

1

Chromeは、外側のdivがであるときに、内側のdivを同じレイヤーに移動していposition: fixedます。

私が思いつく最も簡単な修正は、2つの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 に答える