0

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

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

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

4

3 回答 3

6

你可以用 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));
});
于 2013-02-10T16:35:59.957 回答
2

至少似乎肯定存在一些视差。我对标记的浏览还不够彻底，但需要注意的一点是，带有图形的区域和内容区域（以及广告区域）是兄弟<div>。

就在头顶，加上一些 CSS positioning 和ing，将内容呈现在图形上方z-index会有点简单。似乎只有图形是通过视差滚动来控制的。如果这是有道理的。<div><div><div>

于 2013-02-10T16:37:23.840 回答
2

您可以为您的第一个 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

于 2013-02-10T16:41:33.587 回答