admin管理员组文章数量:1610831
position:sticky(粘性定位)简介
sticky是position属性中新添的一个属性,它可以说是fixed和relative的结合。它主要作用在scroll的监听上,在滚动过程中,当某元素的距离其父元素的距离达到设定的sticky值的时候,这时position:sticky的作用就相当于fixed固定定位,固定在适当的位置,不随滚动条的滚动而发生变化。
- 使用条件
- 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性;
- 必须制定 top、bottom 、left 、 right 4个值之一,否则只会处于相对定位;
- 父元素的高度不能低于sticky元素的高度,否则还没有开始滚动的时候sticky元素就在父元素的底部,不会有任何的作用;
- sticky元素仅在其父元素内生效,如果父元素都不能滚动的话,那么只能对视口其起作用;
- 特点
1.该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
2.当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。
比如,网页的搜索工具栏,初始加载时在自己的默认位置(relative定位)。
当页面开始滚动的时候该块变成fixed定位
测试
我写了一个父元素,设置了overflow:scroll,里面包含了一些子元素,其中一个子元素的css样式设置了position:sticky,再给一个top值,代表了改子元素改变成fixed定位时所在的位置,就实现了该粘性定位的效果。下面给出我的实现代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/sticky.css">
</head>
<body>
<div class="father">
<div class="container">我是内容一</div>
<div class="container">我是内容二</div>
<div class="son">我是sticky</div>
<div class="container">我是内容三</div>
<div class="container">我是内容四</div>
<div class="container">我是内容五</div>
</div>
</body>
</html>
@charset "utf-8";
.father {
width: 800px;
height: 300px;
background-color: aqua;
overflow: scroll;
}
.son {
width: 800px;
height: 30px;
background-color: rgb(255, 0, 0);
position: sticky;
top: 0px;
}
.container {
width: 800px;
height: 200px;
background-color: rgb(255, 238, 0);
}
效果图:
静态:
滚动后:
改变top值后(改为30px)不能超过父元素的height
等到页面重新向上滚动回到原位,工具栏也会回到默认位置。
###sticky生效的前提是,必须搭配top、bottom、left、right这四个属性一起使用,不能省略,否则等同于relative定位,不产生"动态固定"的效果。
版权声明:本文标题:前端css基础篇——position中能实现动态效果的sticky属性 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728605041a1165343.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论