2

ウェブサイトの最後に向かってスクロールするときに、コンテンツの背後にあるショーのフッターを作成しようとしています。説明するのが難しいので、このgifを作成しました。

http://imageshack.us/f/687/newdw.gif/

私はチュートリアルをウェブで検索しようとしましたが、見つけたものは私が探しているものではありません（私が見たのはフッターを上にスライドさせて下にスライドさせることだけです）。

チュートリアルを教えてもらうか、その方法を説明していただければ、大いに役立ちます。

4

1 に答える 1

6

以下は、cssのみを使用して、必要な処理を実行する必要があります。

http://jsfiddle.net/zVLrb/

このソリューションは、要素の動作方法に依存していposition:fixedます。このコードは、短いページ（つまり、スクロールバーが表示されないページ）では、フッターがコンテンツではなくページの下部に固定されたままになることを意味します。

基本的に、ユーザーがスクロールすると、フッターは常にウィンドウ/ビューポートの下部にアタッチされますが、ページの残りの部分がその上に浮いているため、ほとんどの場合、フッターは表示されません。これは、フッターよりもページコンテンツのz-indexが高い。フッターと同じ高さの下マージンを使用することにより、フッターが表示されるスペースを許可しますが、ページの下部にのみ表示されます。:)

これは最近のすべてのブラウザーで正常に機能するはずですが、確認のためにIE7でテストする必要があります（現在、手元にあるものがないため）。

css

.rest {
    position: relative;
    z-index: 100;
    background: #fff;
    margin-bottom: 200px;
    overflow: hidden;
}

.footer {
    height: 200px;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: 0;
    z-index: -1;
    color: white;
    text-align: center;
    font-size: 20pt;
}

.footer p {
    margin-top: 50px;
}

マークアップ

<div class="rest">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat
    euismod urna, eget interdum eros elementum in. Morbi dictum molestie
    porta. Morbi eget consectetur nibh. Etiam sed arcu ac elit dignissim
    consequat.
  </p>
  <!-- obviously this content would need to go on for longer to 
       cause the page to scroll //-->
</p>
</div>
<div class="footer">
    <p>This is the footer</p>
</div>

アップデート

よく覚えていませんが、古いInternet Explorerでは、負のz-indexによってフッターがbodyレイヤーの下に配置される可能性があるため、.restz-index:2とz-index:1フッターに使用するのが最適な場合があります。 。少しの間それをテストする機会はありませんが、可能であれば更新します。

于 2012-10-26T23:43:47.643 に答える