3

私はこのサイトで質問をするのは非常に初めてですが、それを読んで多くのことを学びましたので、どうもありがとうございました!

少しランダムなものですが、このフッターでこの素晴らしい「敷物の下」スタイルの視差効果を見ました - そしてそれをどのようにノックアップできるかについてのいくつかの指針を探していますか?

http://ideaware.co/our_work

どんな援助も大歓迎です!!!

4

2 に答える 2

8

とても簡単！絶対配置され、メイン コンテンツよりも低い z-index を持つフッターを作成します。これを作成した div の css に入れます: position:fixed 。また、フッターが表示されるように、コンテンツ div の上部を少し短くすることも忘れないでください。

幸運を！

あいまいすぎる？聞いてください、答えます！

[編集]：

フィドルの例

この例では、2 つの を含む単純なHTMLページを使用しますdivs。最初のものは#contentコンテナになり、2 つ目は#footer.

<div id="content">
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero felis quis nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim eros nisi, ut vehicula nulla dictum vel. Aenean quis felis libero. Aliquam vulputate sem eros, sed vehicula sem tincidunt vel.</p>
 </div>

//実際に視差効果を確認できるように、フッターにテキストを追加しました

コンテンツに以下を追加しましdivたCSS：

     #content {
    width:100%;
    height:1500px;
    margin-bottom:200px;
    background-color:#123456;
       }

margin-bottomプロパティが footer と等しくなるように注意して設定し てくださいheight。そうしないと、#footerdiv が表示されません。

cssフッターの は次のとおりです。

   #footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:200px;
    z-index:-1;
    background-color:#000;
       }

positionが に設定されていることに注意してくださいfixed。これ#footerにより、ドキュメントに対してではなく、ウィンドウに対して相対的に配置されたままになります。また、私は設定しz-index:-1ます。私はそれをしたので、#footerは の下にあり#contentます。このプロパティを削除すると、 が常に#footerオーバーし、視差の効果が失われることに気付くでしょう。#content

そうそう！これですべてです。

于 2013-01-03T14:45:36.543 に答える
0

フッターの高さを固定せず、コンテンツに合わせて流動的にするには、(jQuery) を使用できます。

var footerParaHeight = $(".footer").height();
$(".content").css("margin-bottom",footerParaHeight);

前述の CSS を使用すると、次のようになります。

.content {
    /*margin being given from jQuery*/
}
.footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}
于 2016-12-12T23:06:57.523 に答える