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を使って、グラフィックの上にコンテンツをレンダリングするのは少し簡単positionです。グラフィックだけが視差スクロールで制御されているようです。それが理にかなっている場合。z-index<div><div><div>

于 2013-02-10T16:37:23.840 に答える
2

最初のdivにonscrollイベントを添付し、JSで2番目の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 に答える