内容固定时背景滚动

Question

我正在使用vue.js和Bootstrap创建一个网站，我在导航下方的网页顶部使用了bootstrap的jumbotron组件，我想知道如何制作一些元素可滚动，同时保持某些元素静止。我将提供一个示例，因为我知道目前这仍然令人困惑。

演示

This is a demo of just the 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. 设置具有绝对位置的徽标包装纸的高度，该高度基本上控制了用户在徽标出现之前必须滚动巨型机的时间。

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