如何仅在另一个 div 内修复 div？

Question

我有一个带滚动的长页面。我只想在另一个 div 内修复一个 div。

<div class="box" >
  <div class="inbox1">
    menu
  </div>
  <div class="inbox2">
    text
  </div>
  <div style="clear:both"></div>
</div>

（另请参阅此Jsfiddle）

所以，当我滚动页面时，绿色框应该总是在视图中，但只在红色框内。当红框向上滚动时，绿框应留在红框内并与红框一起向上滚动。

所以我想在本地修复红框里面的绿框。

UPD：看起来唯一的方法是使用 Jquery 插件 stickyfill。这是一篇好文章http://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042。感谢 Paulie_D 的位置：粘性

Answer 1

目前还不完全清楚您的要求，但position:sticky似乎满足了要求。

所以，当我滚动页面时，绿色框应该总是在视图中，但只在红色框内。当红框向上滚动时，绿框应留在红框内并与红框一起向上滚动。

body {
  height: 1000px;
}
.box {
  border: 1px solid red;
  margin-top: 40px;
  position: relative;
}
.inbox1 {
  border: 2px solid green;
  position: sticky;
  width: 100px;
  top: 0;
}
.inbox2 {
  border: 2px solid blue;
  height: 500px;
  width: 100px;
  float: right;
}

<div class="box">
  <div class="inbox1">
    menu
  </div>
  <div class="inbox2">
    text
  </div>
  <div style="clear:both"></div>
</div>

位置：粘性@MDN

box位置是按照正常流计算的（这叫做正常流中的位置）。然后框相对于其流根和包含块偏移，并且在所有情况下，包括表元素，不影响任何后续框的位置。当一个框 B 被粘性定位时，下一个框的位置被计算为好像 B 没有偏移。'position:sticky' 对表格元素的效果与 'position:relative' 相同。

注意：浏览器支持并不普遍，因此您可能需要回退，例如 JS polyfills。