0

残りのコンテンツの背後にフッターを表示したいのですが、問題は、フッターの 300 ピクセルの高さだけではなく、画面全体で Web サイトがスクロールし続けることです。これが私がこれまでに持っているものです：

http://everetdale.com/starfalling.ca/

ご覧のとおり、フッターが表示されていますが、その上に空白がたくさんあります。これが私がやりたいことをするウェブサイトです：

http://ideaware.co/

フッターが表示されるとスクロールが停止するようにするにはどうすればよいですか?

4

3 に答える 3

1

/ * コメントに基づいて回答を更新 * /

他には何も動かず、背景画像のみが視差タイプの効果を「明らかに」するため、ここでデモできる HTML/CSS のみを使用することをお勧めします。

http://jsfiddle.net/VyQdY/

HTML コード:

<div id="one">
     <p> Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. </p>
</div>
<div id="two">
    <p> Two Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text.     </p>
</div>
<div id="three">
    <p> And finally three Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. </p>
</div>

そしてそれぞれのCSS：

#one, #two, #three {height: 600px; width:100%;}

#one {background: url(http://placekitten.com/600/800) top center fixed;}
#two {background: url(http://placekitten.com/700/800) center center fixed;}
#three {background: url(http://placekitten.com/600/850) top center fixed;}

</p>

（背景画像のプレースホルダーの子猫を許してください、私は子猫さえ好きではありません）

/ * 元の回答 * /

詳細を知らなくても、コードを見なくても、ページ全体の高さ (おそらくフッターの上の div) に問題があることがわかります。

高さがフッターの上部に達したときに「スクロールを停止する」ポイントにあることを確認する必要があります。

コードを jsfiddle に貼り付けると、さらに説明する (または実演する) ことができます。

また、これのいくつかを行うためにjavascriptを使用しているようです-スクロール時に異なる背景と画像を異なる時間に移動させることを計画していますか、それともすべてが「静的」でスクロール時にのみ「表示」されますか? もしそうなら、これらすべてを HTML と CSS だけで実現できます。

于 2012-10-25T21:06:13.630 に答える
0

liあなたのソース コードを読みましたが、私が想定するメイン コンテンツを含む要素があることがわかりました。現在、この要素は CSS ルールを 0 から約 600 に動的に変更しています。下にスクロールすると、この変更margin-topにより、この要素が非常に高くなることが強制されるため、これが問題なのだろうかと思います。margin-top

以前に使用したことがないため、問題を正確に見つけることができませんcurtain.jsが、要素がこれほど高くなった理由を調べて、margin-topこれを削除できるかどうかを確認してください.

これが役に立ったことを願っています！

于 2012-10-25T21:08:14.273 に答える
0

JavaScript は、2 つの主要な ol>li の合計の高さを計算し、関数 setBodyHeight() を使用して体の高さを設定します。上位のコンテンツ (#section-1) がはるかに高いため、この計算は失敗します。あなたはこれをチェックし始めるべきです...

于 2012-10-25T21:03:03.433 に答える