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/