bootstrap詞綴不附加視差滾動 - 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將背景移動速度的一小部分（甚至是負值速度）。這種方法導致與引導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/