固定位置 DIV 直到与其他元素发生碰撞答案

【问题标题】：Fix position DIV until collide with other element固定位置 DIV 直到与其他元素发生碰撞
【发布时间】：2019-01-28 16:57:41
【问题描述】：

我有 2 个 DIV，其中一个是带有 dom-repeat 的 Polymer，它将重复其中的 DOM，但另一个 DIV 需要固定位置，直到第一个 DIV 扩展碰撞

<div> Text </div> . // This have DOM-REPEAT
<div class="fix"> </div> . // Need to fix position until get collide

div 类“fix”需要包含原始位置，直到第一个 DIV 展开并与“fix”元素发生碰撞，然后变为“相对”

有没有办法做到这一点？我尝试了边距和填充，但它根本不起作用

【问题讨论】：

这种情况只有 JS 能帮上忙，等我一下
混淆了一天后，我通过使用 min-height 解决了这个问题

标签： javascript html css polymer

【解决方案1】：

这是我的解决方案，如果你认为有帮助，请投票

.outter {
  width: 100px;
  min-height: 300px;
  background: red;
  position: relative;
  overflow: auto;
}

.fixed-one {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 20px;
  background-color: blue;
}

<div class="outter">
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
    <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
    <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div>  content content</div>
  <div class="fixed-one">
    I am fix
  </div>
</div>

【讨论】：