bootstrap affix не привязывается к прокрутке parallax - перспектива CSS3 + преобразование

Question

Я использую метод параллакса с использованием перспективы CSS3 и масштаб преобразования. Делать это, кажется, перерыв бутстрап аффикс. Как мне заставить работать?

fiddle here

HTML

<main> 

    <!-- remove BELOW to see affix working properly --> 
    <div class="parallax"> 
     <div class="parallax-layer parallax-layer-back" id="parallax-image-architecture"> 
      background slow layer 
     </div> 

     <div class="parallax-layer parallax-layer-base"> 
    <!-- remove ABOVE to see affix working properly --> 

      <div class="spacer"> 
      </div> 

      <div class="affixable-wrapper"> 
       <nav id="navbar" class="navbar navbar-default affixable" role="navigation">    
        <ul id="social-icons" class="nav"> 
         <li>affix this navbar! 
         </li> 
        </ul> 
       </nav> 
      </div> 

      <div>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</div> 

    <!-- remove BELOW to see affix working properly --> 
     </div> 
    </div> 
    <!-- remove ABOVE to see affix working properly --> 

</main> 

CSS

.parallax { 
    perspective: 1px; 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

.parallax-layer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.parallax-layer-base { 
    transform: translateZ(0); 
} 

.parallax-layer-back { 
    transform: translateZ(-10px) scale(11); 
} 

@mixin parallax-image($image-path) { 
    background-image: url($image-path); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: top center; 
} 

#parallax-image-architecture { 
    /* 1255x837 */ 
    @include parallax-image("http://kpclgroup.com/wp-content/uploads/2014/03/architecture-drawing-og-making-the-house.jpg"); 
} 





.spacer { 
    height: 100px; 
    background-color rgba(255,255,255,0.8); 
} 

#navbar.affix { 
    position: fixed; 
    top: 0; 
    z-index: 100; 
    width: 100%; 
    box-shadow: 0px 6px 3px -3px #888; 
} 

JS

$('.affixable-wrapper').height($('.affixable-wrapper > .affixable').height()); 

$('.affixable-wrapper > .affixable').affix({ 
    offset: { 
    top: $('.affixable-wrapper > .affixable').offset().top 
    } 
}); 

Answer 1

Это не ответ решения, а анализ того, что происходит.

Когда вы используете перспективу, этот элемент становится новым контекстом стекирования, обозначаемым им, который становится прокручиваемым в зависимости от его размера и размера.

Это приводит к тому, что положение «нормального» уровня прокрутки отличается от положения прокрутки нового стека ... что означает, что обычное обнаруженное значение позиции прокрутки, которое вы передали в .affix(), фактически не достигло.

Если вы можете каким-то образом определить положение прокрутки нового стекового контекста и передать это значение в функцию аффикса, тогда это может быть возможно.

Но я отошел от метода перспективы и 3d-преобразования и вместо этого предпочел установить абсолютный элемент фона, определить положение прокрутки и использовать javascript для перемещения фона на долю скорости (или даже отрицательную скорость). Этот метод приводит к гораздо меньшей несовместимости с функциями bootstrap js. Она также имеет то преимущество, что только одну переменных/значение, которое контролирует скорость (а не несколько зависимых значений с точкой зрения 3d преобразованиями пути).}

Это статья объясняет очень simpley http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

Это имеет Недостаток использования метода jquery .scroll(), но вы можете смягчить быстрый множественный запуск с помощью функции тайм-аута, описанной в этой статье http://www.karavas.me/jquery-window-scroll-timeouts/