Javascript 内容固定时背景会滚动

我正在使用vue.js和Bootstrap创建一个网站。我使用了Bootstrap的

jumbotron

组件，该组件位于我的网页顶部，就在我的导航下方，我想知道如何在保持某些元素静止的同时使某些元素可滚动。我将包括一个例子，因为我知道这在这一点上仍然令人困惑

演示

除了jumbotron之外，页面上还有其他内容。我想要的是别克标志（我也会有其他标志），在其他内容后面的背景中滚动一小段时间，直到页面的主滚动动作接管为止。我希望我现在要找的是清楚的。如果你需要更多的信息，我很乐意提供

---

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

因此，据我所知，您希望使某些元素可以滚动，而其他元素则处于固定位置。这可以通过css定位和溢出来实现。 如果您有一个元素，除非该div中有足够的内容使其可滚动，否则您希望该元素是可滚动的，请使用以下css

位置：固定；
溢出y：滚动

您需要使用CSS的

后台附件

属性

HTML:

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

.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;
}

---

如果我正确地解决了问题，这应该可以解决问题：

简要介绍所做的工作：

使文本和徽标包装直接指向滚动容器的子对象。在您的例子中，它是.jumbotron，它只有一个直接的子级-本机jumbotron.container。因此，我将滚动行为设置为.wrapper div而不是.jumbotron

在文本包装器上设置位置粘性。这将为我们提供所需的行为：粘贴到父窗口的顶部（或任何设置的边框），并在主窗口滚动时与其一起滚动

使用position absolute设置徽标包装的高度，它基本上控制用户在徽标出现之前滚动jumbotron的时间

---

至少对我来说，现在还不太清楚你到底想要完成什么。也许你可以画一幅快速的图画，例如画开始状态、中间状态和结束状态，解释应该发生什么，并把它们添加到问题中。@Sumurai8我添加了一些图片，如果这有助于你理解我试图实现的目标，请告诉我。如果你想让一些文本保持在屏幕上的固定位置，在jumbotron离开屏幕之前，固定文本应该在哪一点随jumbotron一起从屏幕上滚动？好的，如果我使用fixed，fixed不是我想要的。它会将这些元素固定到整个页面，我希望它们保留在

jumbotron

中，很抱歉，我认为我的示例中已经清楚了这一点。你能解释一下我如何使用溢出：隐藏在我的演示中，你能再解释一点我将如何使用这个属性吗？鉴于我的用例，我将有多个小图像我想在背景中滚动抱歉，如果这听起来很粗鲁，你是否检查了代码片段或代码笔？您是否尝试过将此答案中的样式集成到代码中？首先，您必须将图像从当前的

实现移动到CSS的

背景img

属性。至少试一下，把你不懂的问题贴出来。这个答案很简单，也很直截了当。如果你仍然不明白，提出具体的疑问。是的，我在我的网页上尝试过这一点。一开始我很困惑，因为你的代码笔似乎不是我要找的东西。这个属性似乎在修复图像并允许文本滚动，我想要相反的效果。你能分享一些你看到这种效果的例子吗。对不起，我无法想象你在说什么。您是否尝试过寻找

视差

效果？这就是你想要实现的吗？好的，这就是我所说的一个例子，如果我正确理解了Parllax效果，那就是当屏幕上的元素具有不同的滚动速率时，我想要的是jumbotron中的文本被固定，并且当用户滚动时，徽标在文本后面移动感谢你理解我想要的。让我把它整合到我的网站上，我会马上接受你的回答。我只是简单地问了一个问题，我一直在玩高度属性，我无法让徽标从jumbotron顶部滚回，这就是我想要的，如果你正在谈论以下事件：向上滚动->徽标到顶部->保持滚动->主窗口向上滚动->向下滚动->主窗口向下滚动->保持滚动->徽标不向下移动，然后它链接到主窗口完成滚动后未重新获得焦点的jumbotron容器。不过，如果您将光标移动至少几个像素，然后再次尝试滚动，则该功能仍然有效。我不知道这是否是嵌套滚动的预期行为。如果这不是你的意思，请再解释一点。问题是徽标永远不会到达jumbotron顶部，它会在中途停止。我理解焦点需要在jumbotron上的概念，以便控制徽标的滚动。这不是问题。好的。然后您应该为父容器（

.wrapper

）设置一个固定高度，并将移动元素（

.alpha

）的

bottom

属性设置为包装高度和元素高度之间的差值（我已经更新了codesandbox）。另外，请注意，jumbotron具有64px的本机顶部和底部填充，因此徽标不会滚动到该点上方。