视差滚动：如何使父级高度缩小以适合内容？

Question

我正在尝试为文章创建视差滚动效果。这是我的 HTML：包含文章和页脚的主包装 div。文章的高度应始终与其子项占据的垂直高度 space 相匹配。

<div class="main-wrap">

  <article>

    <div class="hero">
      <div class="hero__content"> 
        <!-- content here --> 
      </div>
    </div>

    <div class="content"> 
      <!-- content here --> 
    </div>

  </article>

  <footer> 
    <!-- content here --> 
  </footer>

</div>

现在，jQuery，我要添加这些视差效果：

$(window).scroll(function(){

   var scrollPos = $(this).scrollTop();

   // parallax the hero text in fromt of the background image
   $('.hero__content').css({
      'top' : (225-(scrollPos*.2)) + 'px'
   });


   // parallax the article-content in front of the hero
   $('.content').css({
      'top' : (0-(scrollPos*.5)) + 'px'
   });

});

视差部分工作正常。问题是我需要缩小文章的高度。否则文章底部有空白space。

我在这里创建了一个 CodePen：http://codepen.io/anon/pen/XmrLxJ 文章被赋予红色背景颜色以显示额外的间距。我已经尝试为文章元素 CSS 提供 "inherit" 和 "auto," 的高度属性，但这不起作用。

Answer 1

T.L。 D.R。将行 'top' : (0-(scrollPos*.5)) + 'px' 更改为 'margin-top' : (0-(scrollPos*.5)) + 'px'
您的问题是您正在使用 javascript 更改元素的位置，并且由于它具有 relative 位置，因此该元素已从其原始位置移动，但在渲染其余部分时仍熟悉原始位置文档。要解决这个问题，您可以为属性设置动画，它会移动文档中的元素，而不是仅仅移动它显示的位置。我不知道我是否说清楚了，但是如果您将动画中的属性从 top 更改为 margin-top，它就会起作用。

但是恕我直言，.article-content 的动画效果几乎不引人注意。我在你的代码笔中删除了它，但没有注意到其中的区别。

作为脚注，我将此库用于滚动效果，我发现它非常有用且易于使用。
http://prinzhorn.github.io/skrollr/

视差滚动：如何使父级高度缩小以适合内容？

Parallax scrolling: How can I make the parent height shrink to fit the content?

jquery

parallax