javascript - 向下滚动时如何让 "background-image"的一部分仍然可见

Question

我最近在使用我的新 Wordpress 网站时遇到了难题。我想知道当我在页面中向下滚动时如何保持部分标题图片可见。现在，我的标题图片是页面高度的 75%，但是当我向下滚动时，图片会消失，因为它应该是这样的。但我想要的是它的某个部分，比方说 20%，在顶部的“固定”位置保持可见。

所以，继续图片:

我没有滚动的内容:

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

向下滚动时我想要的内容:

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

不过，我不知道我是否足够清楚，感谢所有愿意帮助我的人!

Answer 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});

注意间距偏移量上的负数，它允许滚动大部分图像。

fiddle 示例:http://jsfiddle.net/CZYav/2/