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

Question

How do I achieve this scrolling effect in Boostrap? Have a fixed image background with the content div overlayed on top when scrolling:

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

Answer 1

There are several ways you could achieve this. You could fix a background image to html and offset the body, adding padding to keep text in the viewport. For example:

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 .

EDIT

Looking further into your example's code, you could also add margin-top to the body and remove the positioning top . Your example shows margin-top: calc(100vh - 140px) !important;

Here's an updated version of my fiddle with the properties swapped. You can see that the effect is very similar.

Answer 2

You are looking for Parallax scrolling. Here is the link with working demo on how to achieve this.