Создать липкий элемент

Question

Я хотел бы создать липкий элемент для этого JSFIDDLE .«Синий» div должен быть зафиксирован, пока «розовый» не коснется его, и тогда «синий» div может оказаться в относительном положении.

HTML:

<div class='blue'> I want to stay 'fixe' until the pink bloc touch me. </br> Then I can be 'relative'.</div>

<div class='pink'></div>

CSS:

body {margin:0;}

.blue {
 height:50vh;
 position:relative;
 width:100%;
 display:inline-block;
 background:blue;
 color:white;
 text-align:center;
}

.pink {
 height:500vh;
 margin-top:40vh;
 position:absolute;
 width:100%;
 display:inline-block;
 background:pink;
}

Answer 1

Попробуй это.:)

div.blue {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: blue;
    height: 50vh;
    color:#fff;
    font-size: 20px;
    text-align: center;
}
div.dummy {
	width: 100%;
    height: 500px;
}
div.pink {
    position: relative;
    top: 0;
    background-color: pink;
    padding: 50px;
    height: 500vh;
    font-size: 20px;
}

<div>
  <div class="blue">I want to stay 'fixed' until the pink bloc touch me. <br/> Then I can be 'relative'.</div>
  <div class="dummy"></div>
</div>
<div class="pink">

О, кстати, не используйте .Используйте
или
.Рад помочь вам.

Answer 2

Вы можете сделать это, используя липкую позициюПросто обратите внимание на поддержку браузера

body {
  margin: 0;
}

.container {
  height: 90vh; /*height of the blue + margin-top of the pink*/
}

.blue {
  height: 50vh;
  position: sticky;
  top: 0;
  background: blue;
  color: white;
  text-align: center;
}

.pink {
  height: 500vh;
  background: pink;
}

<div class="container">
  <div class='blue'> I want to stay 'fixe' until the pink bloc touch me. <br> Then I can be 'relative'.</div>
</div>
<div class='pink'></div>