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

Question

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

所以，要恢复图片：

我没有滚动的东西：

向下滚动时我想要什么：

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

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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

当您发现用户向下滚动太远时，只需继续跟踪您的滚动距离并修改的background属性。div不需要 jQuery 的其他插件。

2 回答 2