0

作業 URL: http://webstage.co/scroll/stack.html

私が達成しようとしているのは、コンテンツが背景領域 (1280x800) の外にあるときにコンテンツを非表示にすることです。新しいセクションにスクロールしたときに背景が表示される方法は気に入っていますが、その 1280x800 ビューポートに入るまでコンテンツを非表示にしたいですか? これを達成する方法について何か提案はありますか?

おまけ...トップナビゲーションの下にもコンテンツをスクロールアップすると、その下にもコンテンツを非表示にできれば素晴らしいと思います。男は夢を見ることができます。:)

ありがとう！

4

1 に答える 1

1

最初の部分では、次のような css で別の div とターゲットを追加できます。

 .viewport {
    width: 1280px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -640px;
    background: black;
    clip: rect(800px, 1280px, auto, auto);
}

基本的に、背景をページの背景と同じ色に設定し、クリップを使用して目的のビューポート領域の下にある div の部分のみを表示し、ビューポート領域の外側のコンテンツを非表示にします。

後でフッターにコンテンツを追加する場合は、ビューポート div の上に配置されるように、z-index 設定を微調整する必要がある場合があります。

于 2012-10-22T21:47:29.977 に答える