Question

如何在Boostrap中实现此滚动效果？滚动时，内容div叠加在顶部，有一个固定的图像背景：

http://www.standardhotels.com/culture/things-to-do-july-2017-new-york-los-angeles-miami

Answer 1

有几种方法可以实现这一目标。您可以将背景图像修复为html并偏移正文，添加填充以保持视口中的文本。例如：

html {
  background: url(DESIRED BACKGROUND IMAGE) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  background:lightblue;
  padding-left:150px;
  padding-right: 30px;
  position:relative;
  left:-150px;
  top:80%;
}

Check out this basic (but very cute) kitten example

修改

进一步查看示例的代码，您还可以将margin-top添加到正文并删除定位top。您的示例显示margin-top: calc(100vh - 140px) !important;

交换属性的

Here's an updated version of my fiddle。你可以看到效果非常相似。

Answer 2

您正在寻找视差滚动。 Here是关于如何实现此目标的工作演示的链接。

如何在Bootstrap中实现这种滚动效果？

2 个答案:

修改