javascript - 滚动页面时如何更快地移动 1 div/越过 div

Question

我看到了这个效果here .滚动页面时，页面的主要内容部分会移动到 div 之上。

我尝试使用视差效果重新创建此效果，但徒劳无功。问题是使用视差，我只能更改同一 div 中的 2 个对象的速度。除此之外，我将不得不添加一些不必要的标记遍布页面以使脚本正常工作。

有没有更简单(或有效)的方法来实现这种效果？非常感谢

Answer 1

You can do this with CSS .

#head, #subHead{
    position: fixed;           
    height: 80px;    
    width: 100%;
    display: block;
    left: 0;
    top: 0;
    z-index: 10;         /* on top of all */
}

#subHead{
    z-index: 4;          /* below all */
    top: 80px;           /* height of the top div */
}

#content{
    position: relative;
    z-index: 6;          /* below the top div, but above the one below it */
    margin-top: 160px;   /* the height of the two divs above combined */
}

并使 subHead 滚动速度变慢:

window.onscroll = function(ev){
  var subHead = document.getElementById('subHead'),
      topHeight = document.getElementById('head').offsetHeight;

  subHead.style.top = (topHeight - document.body.scrollTop / 4) + 'px';
};    

jQuery:

$(window).on('scroll', function(){  
  $('#subHead').css('top', ($('#head').height() - $('body').scrollTop() / 4));
});