Позиция Фиксированная и обратная видимость

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/

Надеюсь, это поможет!