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

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

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

注意间距偏移上的负数，这样可以滚动大部分图像。

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

Answer 2

我在这里有一个演示：http://jsbin.com/ubolos/1/edit

当您发现用户滚动太远时，只需跟踪您的滚动距离并修改background的{​​{1}}属性即可。没有其他jQuery插件需要。