如何讓部分「背景圖像」在滾動時仍可見

Question

我最近面臨着我的新WordPress網站的困境。 我想知道如何在頁面中向下滾動時保持頁眉圖像的一部分可見。 現在，我的頁眉圖像是頁面高度的75％，但是當我向下滾動時，圖像會消失，因爲它應該是。 但我想要的是，它的某個部分，比如20％，在「固定」位置的頂部保持可見。

因此，恢復在圖片：

我有什麼不滾動：

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

我想什麼有向下滾動時：

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

我不知道我是否足夠清楚，但是，感謝所有會盡力幫助我的人！

Answer 1

您可以使用jQuery插件像sticky：

<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，你可以使用粘插件：

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

注意間距偏移的負數，它允許大部分圖像t o滾動。

例小提琴：http://jsfiddle.net/CZYav/2/

Answer 2

我這裏有一個演示：http://jsbin.com/ubolos/1/edit

只要保持跟蹤你滾動距離和修改div的background屬性，當你發現用戶滾動太遠。沒有其他的jQuery插件需要。