Зафиксируйте положение DIV, пока не столкнетесь с другим элементом - PullRequest
Новая
       11

Зафиксируйте положение DIV, пока не столкнетесь с другим элементом

0 голосов
/ 28 января 2019

У меня есть 2 DIV, один - это Polymer с dom-repeat, который будет повторять 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 ", а затем изменится на" относительный "

. Есть ли способ сделать это?Я пробовал margin и padding, но он вообще не работает

1 Ответ

0 голосов
/ 28 января 2019

Вот мое решение, проголосуйте, если думаете, что это поможет 

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