创建一个粘性元素

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

您可以使用粘性位置进行操作。只需注意browser support

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

TableVieww.layer.alpha = 0.0

Answer 2

尝试一下。 ：）

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

哦，顺便说一句，不要使用
。使用
或
。 很高兴为您服务。