Question

当用户滚动时，如何设置上部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>

Answer 1

你的css拼写错误的“位置”。你离开了最后一个“我”。它应该是：

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

Answer 2

如果我理解正确，.top-wrapper已修复，您希望其他所有内容都能向上滚动.top-wrapper。由于没有足够的内容让你的div变得更高，你将没有足够的空间来实际滚动那么高。您可以通过以下方式增加垂直空间：

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

CODEPEN

Answer 3

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

我修复了（例如position: fixed;）＆＃39; .top-wrapper＆＃39;，还修复了＆＃39;标题＆＃39;，另外还给了＆＃39;。顶包装＆＃39; margin-top: 50px;将其放置在标题下方。（我还在底部包装器中添加了一些内容，使滚动更加明显）

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

3 个答案: