1

最近、新しい Wordpress サイトでジレンマに直面しています。ページを下にスクロールしているときに、ヘッダー画像の一部を表示したままにする方法を考えています。今のところ、ヘッダー画像はページの高さの 75% ですが、下にスクロールすると画像が消えてしまいます。しかし、私が望むのは、その特定の部分、たとえば 20% が「固定された」位置で上部に表示されたままになることです。

だから、写真で再開するには：

スクロールせずに持っているもの：

http://i.stack.imgur.com/2NxcQ.jpg

下にスクロールするときに私がしたいこと：

http://i.stack.imgur.com/nwoQw.png

私が十分に明確であるかどうかはわかりませんが、これについて私を助けようとするすべての人に感謝します!

4

2 に答える 2

1

stickyのような jquery プラグインを使用できます。

<div class="top">Content</div>
<div class="header"></div>
<div class="content">
   ....
</div>

次に、CSS に画像を適用します。

.header
{
    background-image: url('http://placekitten.com/200/300');
    height:300px;
    width: 100%;
}

次に、js で sticky プラグインを使用できます。

$(".header").sticky({topSpacing:-250});

間隔オフセットの負の数に注意してください。これにより、ほとんどの画像をスクロールできます。

フィドルの例: http://jsfiddle.net/CZYav/2/

于 2013-01-19T14:45:21.240 に答える
1

ここにデモがあります: http://jsbin.com/ubolos/1/edit

スクロールした距離を追跡し続け、ユーザーが下にスクロールしすぎていることがわかったら、のbackgroundプロパティを変更します。divjQuery の他のプラグインは必要ありません。

于 2013-01-19T15:13:26.593 に答える