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

Question

我有 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”元素发生碰撞然后更改为“relative”

有没有办法做到这一点？ 我已经尝试过 margin 和 padding 但它根本不起作用

Answer 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>