内容固定时背景滚动

Question

我正在使用 vue.js 和 Bootstrap 制作网站保持一些元素静止。我将举一个例子，因为我知道这在这一点上仍然令人困惑。

演示

This is a demo of just the jumbotron在jumbotron旁边的页面上会有其他内容我想要的是别克标志（我也会有其他标志）在其他内容后面的背景中滚动一小会直到主滚动页面的动作接管。我希望我现在正在寻找什么是清楚的。如果您需要更多信息，我很乐意提供。

为了清楚起见，这些图片只是显示 jumbotron 而不是整个页面。固定位置也不能解决我的问题，因为我希望固定元素保留在 jumbotron 中。

Answer 1

如果我解决了问题，这应该可以解决问题：https://codesandbox.io/embed/serene-rhodes-42224?fontsize=14&hidenavigation=1&theme=dark。

简要说明做了什么：

1. 使文本和徽标包装器直接成为滚动容器的子级。在您的情况下，它是 .jumbotron，它只有一个直接子级 - 本地 jumbotron .container。因此，我将滚动行为设置在 .wrapper div 而不是 .jumbotron 上。
2. 在文本包装器上设置置顶位置。这将为我们提供所需的行为：粘在父窗口的顶部（或任何设置的边框），并在主窗口滚动时随之滚动。
3. 使用绝对位置为徽标包装器设置高度，这基本上控制了用户在徽标出现之前必须滚动 jumbotron 的时间。

Answer 2

因此，据我了解，您希望使某些元素可滚动，而其他元素则处于固定位置。这可以使用 css 定位和溢出来完成。 如果您有一个想要不可滚动的元素，除非该 div 中有足够的内容使其可滚动，请使用以下 css

position: fixed;
overflow-y:scroll;

但是，如果您希望元素保持不可滚动（无论如何都无法滚动），只需使用以下 css：

overflow: hidden;

Answer 3

你需要使用CSS的background-attachment属性。

HTML：

<div class="fixed">
--- Your Content Here ---
</div>

CSS：

.fixed {
  background: url('https://cdn.pixabay.com/photo/2016/06/11/23/22/soap-bubbles-1451092_960_720.jpg');
  background-attachment: fixed;
height: 400px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
}

Check CodePen here