位置固定和背面可见性

Question

我有三个剖面区域，在这些区域中有一个标题元素和一个位置固定的子项目。

随着用户的滚动，我希望下一部分能够覆盖上一节包括其固定的孩子。

我在Chrome这方面的工作，通过使用背面的知名度：

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

但在FF，固定项目不再是固定的。看看我的jsfiddle http://jsfiddle.net/7KjXm/5/

这是预期的行为？是否有跨浏览器解决方案？还是JS要走？

谢谢....

Answer 1

我设法解决您寻找的效果。不幸的是，似乎只有css（yet）才能做到这一点。

Here是我的解决方案，它使用原始页面的jQuery和修改后的CSS。我切换到数字而不是彩色元素，并更改大小。

我给假浮动元素的JavaScript（允许当视图移开对它们进行隐藏）：

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

我给这个特定的例子自定义CSS：代码

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

彩色更新：http://jsfiddle.net/8F2Zc/4/

希望这有助于！