Question

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

<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'
   });

});

视差部分工作正常。问题是我需要收缩文章的高度。否则，文章底部会有空白区域。

我在这里创建了一个CodePen：http://codepen.io/anon/pen/XmrLxJ 该文章被赋予红色背景颜色以显示额外的间距。我试过给文章元素CSS高度属性“继承”和“自动”，但这不起作用。

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/

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

1 个答案: