当页面滚动时，如何在div上快速移动1 div

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

我尝试使用视差效果重新创建这个效果，但是徒劳无功。问题是使用视差，我只能在同一个div中改变2个物体的速度。除此之外，我将不得不放置一些不必要的标签使脚本工作的页面。

有没有更简单（或工作）的方法来实现这种效果？非常感谢

Answer 1

你可以用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)); }); 

Answer 2

肯定似乎至少会出现一些视差。 我没有仔细查看标记，但有一点需要注意的是，带有图形和内容区域的区域（以及广告区域）是兄弟

s。

只是顶部，有一些CSS position和z-index ing，在图形

上面渲染内容

会有点简单。 似乎只有图形

通过视差滚动进行控制。 如果这是有道理的。

Answer 3

您可以为第一个div附加onscroll事件，并在JS中设置第二个div的滚动位置。

JavaScript的：

 function OnScrollDiv () { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div2.scrollTop = div1.scrollTop * 2; } 

更多信息请访问： http ： //help.dottoro.com/ljurkcpe.php http://help.dottoro.com/ljnvjiow.php