滚动时保持 div 及其子项固定答案

【问题标题】：Keep div and its children fixed when scrolling滚动时保持 div 及其子项固定
【发布时间】：2016-05-15 08:57:11
【问题描述】：

当用户滚动时，如何设置上部 div 固定以使下部 div 越过他？我不知道图像的高度是多少。 http://codepen.io/anon/pen/oxOPXv

// Stays in position
<div class="col-md-12 top-wrapper">
  <div class="container image-wrapper">
    <img src="http://placehold.it/750x550" />
  </div>
</div>

// moving up and over .top-wrapper (also other content below this)
<div class="bottom-wrapper">
  <div class="container">
    <div class="col-md-3 sidebar">
      <p>Lorem</p>
    </div>
    <div class="col-md-9 main-div">
      <p>Lorem</p>
    </div>
  </div>

</div>

【问题讨论】：

不确定所有引导程序的可能性，但是，因为你有 jQuery，并且图像高度是动态的......这（也许）可能会有所帮助：codepen.io/anon/pen/oxOPBg

标签： css twitter-bootstrap-3

【解决方案1】：

您在 CSS 中拼写错误的“位置”。你留下了最后一个“我”。应该是：

.top-wrapper {
  background-color: #eee;
 position: fixed;
}

【讨论】：

没错，那是我尝试在 Codepen 上设置代码的时候。但是问题仍然存在，因为这破坏了所有内容，标题和较低的内容:)

【解决方案2】：

如果我理解正确，.top-wrapper 是固定的，您希望其他所有内容都能够向上滚动并越过.top-wrapper。由于没有足够的内容使您的 div 变得更高，因此您将没有足够的空间来实际滚动那么高。您可以通过这样做来增加垂直空间：

body {
  height: 250vh;
  overflow-y: auto;
}

CODEPEN

【讨论】：

【解决方案3】：

你的意思是这样吗？：http://codepen.io/anon/pen/dMLqdM

我不仅修复了（即position: fixed;）“.top-wrapper”，还修复了“header”，此外还为“.top-wrapper”提供了margin-top: 50px;，以将其定位在标题下方。（我还在底部包装器中添加了更多内容以使滚动更明显）

【讨论】：