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

Question

如何在 Bootstrap 中实现这种滚动效果？有一个固定的图像背景，滚动时内容 div 覆盖在顶部:

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

Answer 1

您可以通过多种方式实现这一目标。您可以将背景图像固定为 html 并偏移正文，添加填充以将文本保留在视口(viewport)中。例如:

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交换了属性。可以看到效果很相似。