我不希望它是粘性的从顶部,我希望它从底部,但它不工作,我的描述是在代码下!
判断此代码:
*{
margin: 0;
padding: 0;
}
.parent{
background-color: #d1ffed;
width: 100%;
height: 1500vh;
position: relative;
}
.box{
margin: 0 auto;
width: 90%;
height: 300vh;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.box3{
background-color: green;
}
.box4{
background-color: yellow;
}
.box5{
background-color: purple;
}
.child{
width: 80%;
height: 150vh;
background-color: orange;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
position: sticky;
top: 0; //when using top:0 works as well
}
.title{
color: white;
}
<div class="parent">
<div class="box box1">
<div class="child">
<h1 class="title">TOP 1</h1>
<h1 class="title">BOTTOM 1</h1>
</div>
</div>
<div class="box box2">
<div class="child">
<h1 class="title">TOP 2</h1>
<h1 class="title">BOTTOM 2</h1>
</div>
</div>
<div class="box box3">
<div class="child">
<h1 class="title">TOP 3</h1>
<h1 class="title">BOTTOM 3</h1>
</div></div>
<div class="box box4">
<div class="child">
<h1 class="title">TOP 4</h1>
<h1 class="title">BOTTOM 4</h1>
</div>
</div>
<div class="box box5">
<div class="child">
<h1 class="title">TOP 5</h1>
<h1 class="title">BOTTOM 5</h1>
</div>
</div>
</div>
上面的代码,如你所见,我有一个高度为1500vh的父div.
在这个父div中,我还有另一个div,每个div都提取父视图的20%,也就是300vh.
所以我的问题是如何让从底部开始有class="child"的div是粘性的,我的意思是当每个div的底部进入视图时,div应该是粘性的,更清楚的是,当<h1 class="title">BOTTOM</h1>
感谢您的阅读!