Question

我正在使用使用CSS3透视和变换比例的视差方法。这样做似乎打破了引导词缀。我如何兼顾两者？

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

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

当您使用透视图时，该元素将成为新的堆叠上下文，表示它可根据其大小和内容进行滚动。尺寸。

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

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

但是我已经远离了透视和三维变换方法，而是倾向于将背景元素设置为绝对，检测滚动位置，并使用javascript以一小部分速度移动背景（甚至负速度）。这种方法与bootstrap 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/

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

1 个答案: