1

視差スクロールについて少し助けが必要です。一番上のdivの一番下に画像を貼り付けようとしています。ここにjQueryがあります

function parallax() {
var scrollPosition = jQuery(window).scrollTop();
jQuery('#grid').css('top', (0 - (scrollPosition * .5))+'px' );
}

現在、スクロールするとブラウザウィンドウの上部にくっついています。次のようなより高い数値を使用しましたjQuery('#grid').css('top', (134 - (scrollPosition * .5))+'px' );

これにより、ページの読み込み時に適切な間隔が得られますが、スクロールするとすぐに div の上に白が表示されます。私はjQueryに精通していないので、助けていただければ幸いです。

基本的に、divの一番上の位置を変数に割り当てるにはどうすればよいですかscrollPosition。

/ * UPDATE * / 申し訳ありませんが、この問題の詳細を以下に示します。

ここにjsfiddleがあります

窓の上部にくっついているのがわかりますか？ヘッダーの下部に貼り付けたいと思います。

4

2 に答える 2

0

あなたはおそらくabsoluteポジショニングを使用しています。これを に変更しfixed、top常に にする必要があります0px。これで問題が解決するはずです。これは、それを表示する JSFiddleです。動作させるためにJavaScriptは必要ありません。

于 2013-07-07T01:23:10.553 に答える
0

以前はよくわからなかったので、新しい回答を書いています。背景をヘッダーの下部から開始する必要がありますよね?

絶対位置または固定位置、および z-index を忘れてこれを行いました。代わりに、#header div の後のすべてをラップするラッパー div を作成しました。残りは問題なく、javascript は必要ありませんでした。ラッパーは、背景画像が繰り返されるページの最後まで自動的に拡張されます。

ここにあります：

CSS:

#wrapper {
    padding:20px;
background: url('http://wpzombies.com/wp-content/uploads/2013/07/grid_bg.jpg') repeat top center;
}

css と html から #grid div を削除します

HTML:

<div class="header">
    <h1>A header</h1>
</div>
<div id="wrapper">
    <div class="optin">
        <div class="wrap">
            <div id="home-para">
                <h2 class="home">Build, publish &amp; A/B test landing pages without I.T.</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, sapiente, magni qui ab vero repudiandae beatae a illum sed? Eaque, esse placeat incidunt laudantium sapiente debitis commodi rerum minus? Saepe.</p>
                <div id="opt-box">
                    <input type="email" /><a href="#" class="button orange">You can start here!</a>
                </div>
            </div>
        </div>
    </div>

    <div class="space">Lorem ipsum dolor sit amet...</div>
</div>

そして、スクロール機能に関連するすべての js を削除します。

ここでは JSFiddle にあります。

于 2013-07-07T02:47:19.873 に答える