我不希望它是粘性的从顶部,我希望它从底部,但它不工作,我的描述是在代码下!

判断此代码:

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

感谢您的阅读!

推荐答案

把它放在底部,然后用bottom: 0;

*{
  margin: 0;
  padding: 0;
}
.parent{
  background-color: #d1ffed;
  width: 100%;
  height: 1500vh;
  position: relative;
}
.box{
  margin: 0 auto;
  width: 90%;
  height: 300vh;
  display: flex; /* you need this for the margin-top: auto */
}
.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;
  margin-top: auto; /* push to bottom*/
  bottom: 0;  /* stick to bottom */
}
.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>

Html相关问答推荐

网格容器中的定心元件

如何在htmlAngular 17的@for中使用索引

图像不在HTML文件中显示

不呈现孙子元素,使用R htmlTools::Taglist为分页的pdf生成HTML

HTMLTag属性内的svelte+TS类型声明

你将如何为手机制作导航栏

如何使用css横向显示英文和中日韩文字?

使用CSS和Slick Carcass使图像适合屏幕

为什么一个 CSS 网格框比其他网格框低?

为什么带有截断的 contentedible div 在受约束时会在 Chrome 中添加空格

使用shinyjqui拖放到网格表中

在span中添加

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

如何垂直平移一个元素,使其新位置位于另外两个元素之间?

您如何动态更改 Vue 中更高级别的标签的 CSS

什么没有 margin-right 和 width:100% 溢出子元素到左边?

我如何设置括号的样式,使它们不会挂在旁边的其他字符下面

右对齐 bootstrap 导航项而不是下拉菜单

自定义进度条 Html 和 CSS 布局

SVG 适用于 Safari,不适用于 Chrome