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似乎符合要求。

因此，当我滚动页面时，绿色框应始终在视图中，但仅在红色框内。当红色框向上滚动时，绿色框应保留在红色框中并与红色框一起向上滚动。

＆＃13;

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

＆＃13;

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

＆＃13;

Position:sticky @ MDN

根据正常流量计算箱子位置（这称为正常流量中的位置）。然后该框相对于其流根和包含块偏移，并且在所有情况下，包括表格元素，都不会影响任何后续框的位置。当盒B粘贴时，计算下一个盒子的位置，好像B没有偏移。 'position：sticky'对表元素的影响与'position：relative'相同。

注意：浏览器支持不是通用的，因此您可能需要回退，例如JS polyfill。

Answer 2

我在jsFiddle中更新了你的小提琴手，请试试https://jsfiddle.net/ujh30rLa/3/

以下是更改

body{

}
.inbox1{
  border:2px solid green;
  float:left;
  width:100px;
  position:fixed
}

如何在另一个div中修复div？

2 个答案: