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

How to let a part of a "background-image" still visible when scrolling down

本文关键字：滚动 一部分 背景 图像 背景图像      更新时间：2023-09-26

我最近在我的新Wordpress站点上遇到了一个难题。我想知道如何保持我的头图像可见的一部分，当我在页面上向下滚动。现在，我的标题图像是页面高度的75%，但是当我向下滚动时，图像应该消失了。但我想要的是，它的某一部分，比如20%，在顶部的固定位置保持可见。

那么，在图片中恢复:

没有滚动我有什么:

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

向下滚动时我想要的效果:

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

我不知道我是否足够清楚，不过，感谢每个人都试图帮助我在这一点上!

你可以使用像sticky这样的jquery插件:

<div class="top">Content</div>
<div class="header"></div>
<div class="content">
   ....
</div>
对于CSS，你应用你的image: 
.header
{
    background-image: url('http://placekitten.com/200/300');
    height:300px;
    width: 100%;
}
然后在你的js中，你可以使用sticky插件: 
$(".header").sticky({topSpacing:-250});

请注意空格偏移量上的负数，它允许大部分图像被滚动。

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

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

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

相关文章：