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

时间:2015-08-30 04:05:52

标签: jquery parallax

我正在尝试为文章创建视差滚动效果。这是我的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高度属性“继承”和“自动”,但这不起作用。

1 个答案:

答案 0 :(得分: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/