Question

Okay, what’s most annoying about this is it was working with google Chrome a week ago then suddenly it just stopped working.

Here’s my problem: I have some absolutely positioned divs that change to fixed position after scrolling past a certain point. That part works fine, but I have some z-indexes set on elements inside those divs that get overridden when the position changes to fixed.

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

If my problem still sounds confusing check it out for yourself: my website’s problem. Use chrome and scroll down, it works in firefox and ie.

I gotta make this work cross-browser somehow… can anyone help?

Answer 1

Chrome has recently changed the method of rendering fixed position items. Use jQuery .css to set the zindex instead.