引导词缀不附加视差滚动 - 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() 的通常检测到的滚动位置值实际上并没有达到。

如果您能以某种方式检测新堆叠上下文的滚动位置，并将该值输入到 affix 函数中，那么就有可能。

但是我已经放弃了透视和 3d 变换方法，而是倾向于将背景元素设置为绝对，检测滚动位置，并使用 javascript 以一小部分速度（甚至负速度）移动背景）。这种方法导致与引导 js 函数的不兼容性要少得多。它还有一个优点是只有一个变量/值来控制速度（而不是使用透视 3d 变换方式的多个依赖值）。}

这篇文章解释得很简单http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

这有使用 jquery .scroll() 方法的缺点，但是您可以使用本文中描述的超时功能来缓解快速多次触发http://www.karavas.me/jquery-window-scroll-timeouts/