如何在页面滚动时快速移动1 div /跨越div
问题描述:
我在这里看到了这种效果。
当页面滚动时,页面的主要内容部分在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));
});