bootstrap 附加不附加视差滚动 - CSS3 透视 + 变换

Question

我正在使用 CSS3 透视和变换比例的视差方法。这样做似乎会破坏 bootstrap 词缀。如何让两者都起作用？

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

这不是解决方案答案，而是对正在发生的事情的分析。

当您使用透视图时，该元素会成为一个新的堆叠上下文，表示它根据其大小和内容的大小变得可滚动。

这导致 "normal" 级别滚动位置与新堆叠上下文的滚动位置不同...意味着您传递给 .affix() 的通常检测到的滚动位置值实际上并不存在到达。

如果您能以某种方式检测到新的堆叠上下文的滚动位置，并将该值提供给词缀函数，那么这也许是可能的。

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

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

这有使用 jquery .scroll() 方法的缺点，但您可以使用本文 http://www.karavas.me/jquery-window-scroll-timeouts/

中描述的超时功能来缓解快速多次触发

bootstrap 附加不附加视差滚动 - CSS3 透视 + 变换

bootstrap affix doesn't affix with parallax scrolling - CSS3 perspective + transform

scroll

navbar

parallax

twitter-bootstrap

affix