Question

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

我尝试使用视差效果重新创建此效果，但是徒劳无功。问题在于使用视差，我可以仅在同一个div中改变2个物体的速度。除此之外，我将不得不放置一些不必要的在整个页面上标记以使脚本有效。

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

Answer 1

#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

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

最重要的是，通过一些CSS position和z-index，将内容<div>呈现在图形<div>之上会有点直截了当。似乎只有图形<div>通过视差滚动来控制。如果这是有道理的。

Answer 3

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

<div id="div1" onscroll="OnScrollDiv()">
    <div id="div2"></div>
</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

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

3 个答案: