固定位置和背面可见性

Question

I have three sectioning areas and within these I have a header element and a child item that is position fixed.

As the user scrolls I want the next section to go over the previous section including its fixed child.

I have this working in Chrome by using backface visibility:

-webkit-backface-visibility: hidden;    
-moz-backface-visibility: hidden;   
-ms-backface-visibility: hidden;    
backface-visibility: hidden;

But in FF, the fixed items are no longer fixed. Take a look at the my jsfiddle http://jsfiddle.net/7KjXm/5/

Is this expected behaviour? Is there a cross browser solution? Or is JS the way to go?

Thanks....

Answer 1

I managed to solve the effect you were looking for. Unfortunately, it does not seem possible to do with only css ( yet ).

Here is my solution that uses jquery and modified css of the original page. I switched to numbers instead of colored elements and changed the sizes.

My javascript for fake floating elements (allows for them to be hidden when the view moves away):

$(function(){
    elem = $('.fixeditem');
    win  = $(window);
    wrap = $('<div>').css({
        width: elem.width(),
        height: elem.height()
    });
    elem.wrap(wrap);
    win.scroll(function() {
        elem.each(function(index, element){
            element = $(element);
            var offset = element.parent().offset().top;
            element.css('top', win.scrollTop() + 40 - offset);
        });
    });
});

My custom css for this specific example:

html, body{
    height: 100%;
}

.item {
    min-height:100%;
    background-color: white;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.header {
    position: relative;
    background-color: green;
    padding: 5px;
    z-index: 2;
}

.fixeditem {
    position: relative;
    top: 10%;
    left: 50%;
    z-index: 0;
}

Colored update of code: http://jsfiddle.net/8F2Zc/4/

Hope this helps!