如何在页面滚动时快速移动1 div /跨越div [英] How to move 1 div faster/over a div when the page is scrolled

问题描述

我在这里看到了这种效果。
当页面滚动时，页面的主要内容部分在div上方移动。

I saw this effect here. The main content section of the page moves over and above a div when the page is scrolled.

我尝试使用视差效果重新创建此效果，但在问题是使用视差，我可以改变在同一个div中的2个对象的速度。除此之外，我将不得不在页面上放置一些不必要的标签，使脚本工作。

I tried recreating this effect using the parallax effect,but in vain.The issue is that using parallax,i can change the speed of 2 objects within the same div only.Also apart from that,i will have to put some unncessary tags all over the page to make the script work.

是否有更简单的方法来实现这个效果？

Is there a simpler(or working) way to achieve this effect?Thanks a lot

推荐答案

您可以使用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 */
}

scroll slow：

And to make subHead scroll slower:

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

这篇关于如何在页面滚动时快速移动1 div /跨越div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！