부트 스트랩 어 픽스에 시차 스크롤이 붙지 않습니다 - CSS3 perspective + transform

Question

나는 시차를 사용하여 CSS3 perspective와 스케일을 사용합니다. 이렇게하면 부트 스트랩 접미사가 깨지는 것 같습니다. 둘 다 어떻게 작동합니까?

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

Answer 1

이것은 해결책 답변이 아니라 현재 진행중인 작업에 대한 분석입니다.

원근감을 사용하면 해당 요소가 크기 및 내용의 크기에 따라 스크롤 가능한 상태로 표시되는 새로운 스태킹 컨텍스트가됩니다.

"정상"수준의 스크롤 위치가 새로운 스태킹 컨텍스트의 스크롤 위치와 다릅니다. 즉, .affix()으로 전달 된 일반적인 검색된 스크롤 위치 값에 실제로 도달하지 못합니다.

어쨌든 새로운 스태킹 컨텍스트의 스크롤 위치를 감지하여 접미사 기능에 해당 값을 제공하면 가능할 수 있습니다.

그러나 저는 원근법과 3D 변환 방법에서 벗어나 절대 대신 배경 요소를 절대 위치로 설정하고 스크롤 위치를 감지하고 자바 스크립트를 사용하여 속도의 일부분에서 배경을 이동 시키거나 속도). 이 방법은 부트 스트랩 js 함수와의 비 호환성이 훨씬 적습니다. 또한 (방향 변환 차원 오히려 관점 여러 종속 값 이상)의 속도를 제어/값.}

이 문서가 매우 simpley http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

이것은을 가지고 설명되는 하나 개의 변수를 가지는 이점이있다 jquery .scroll() 메서드를 사용하는 단점이 있지만이 기사에서 설명하는 제한 시간 함수를 사용하여 신속한 다중 트리거링을 완화 할 수 있습니다. http://www.karavas.me/jquery-window-scroll-timeouts/