如何让部分“背景图像”在滚动时仍可见

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插件需要。