Question

我不确定具体用语是什么，但是我希望实现一个横幅图像，当有人在页面中向下移动时，该横幅图像具有这种滚动效果。

此效果的一个示例是this site的横幅图片。

请注意，当向下滚动时，图像的其余部分也会滚动显示。这个叫什么？我该如何实现呢？

我正在使用Twitter Bootstrap＆amp; ruby on rails所以更喜欢实现与bootstrap兼容的最简单方法，但任何人都会这样做，我会从那里弄明白。

Answer 1

使用background-attachment:fixed; info here (MDN)

这也是您链接示例中使用的技术。这是一个例子：

＆＃13;

div{
    background-image: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
    background-attachment:fixed;
    background-size:cover;
    height:200px;
    margin:200px 0;
}

.s{
     background-image: url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);
}

＆＃13;

<div></div>
<div class="s"></div>
<div></div>
<div class="s"></div>
<div></div>
<div class="s"></div>
<div></div>

＆＃13;

Answer 2

只需申请职位：固定;在CSS中你的元素，然后正确定位顶部：x;和左/右：x;例如：

#banner {
    position: fixed;
    top: 250px;
    right: 0;
}

Answer 3

这个东西叫做“粘性导航”，有很多jQuery插件，即this one

另外，查找CSS position: fixed;

如何制作滚动但尺寸保持固定的横幅图像

3 个答案: