css粘性定位position:sticky
前言:
css3中有一个很有趣的属性position:sticky,粘性属性,效果是一个吸顶效果,可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时
(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置。
***注意,这个兼容性特别不好
效果图:
基本用法:
nav{position:sticky;top:10px; /* 阈值 */
}
top/bottom属性
top
,bottom
的距离阈值取决于最近一个overflow
是hidden
scroll
auto
或 overlay
的祖先元素(并不是相对于viewport 视口)。
例如我们设置top:100px
时,在元素滚动到距离祖先元素顶部小于设置的top:100px
之前,元素为相对定位。当滚动到超过或等于top:100px
时,元素将固定在与祖先元素顶部距离 top:100px
的相对位置,直到距离回滚到阈值以下。
根据下面的例子,我们可以看到position:sticky
元素设置的top值是最近一个设置了overflow
的祖先元素的距离,当它滚到距离低于其值时将固定在视口当中,此时该元素的效果就为固定定位。
总结
top
、bottom
的生效距离由最近一个overflow
属性是hidden
scroll
auto
或overlay
的祖先元素决定。- 父元素为
overflow:hidden
时,由于容器内无法滚动,所以实际上也无法生效。 - 必须指定
top
、bottom
、left
、right
4个值之一,否则只会处于相对定位。 - 父元素的高度不能低于sticky元素的高度。
兼容:
position: -webkit-sticky;position: sticky;
案例代码:(可运行)
<!DOCTYPE html>
<html>
<head><title></title><style>.container {display: flex;}.right {border: 1px solid red;width: 100%;margin-top: 40px;overflow: scroll; height: 400px;}nav {position: sticky;top: 100px;}</style>
</head><body>
<div class="container"><div class="right"><h1 style="height:200px;">顶部高200px 红线为中线</h1><nav style="background: red;">这是导航 top:100px</nav><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>滚一个</p><p>到底啦!</p></div>
</div>
</body>
</html>
更多资料:
https://www.jianshu.com/p/b72f504121f5
https://blog.csdn.net/qq_35585701/article/details/81040901
css粘性定位position:sticky相关推荐
- CSS——粘性定位(sticky)
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位. position: sticky; 基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relati ...
- 关于CSS粘性定位——sticky
背景 最近在做项目迁移,因为技术不同,导致某些功能的问题需要手动解决:如何在居位在主体区域底部不随内容而滚动: OK进入正体这期分享的是CSS粘性定位属性sticky来解决上面的问题 粘性定位: 粘性 ...
- 自学前端第十八天:CSS精准定位position
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 "浮起来" 字上面, 那么 我们的position定位关键在于一个 & ...
- html消除绝对定位的影响,css定位常用属性 CSS清除定位position
css中定位position有哪几个属性值? absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位: 元素的位置通过 "left", &quo ...
- 跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
- CSS基础——定位 (position)【学习笔记】
定位(position) 1. CSS 布局的三种机制 网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
- CSS粘性定位(sticky)
原理 元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位.(relative) 元素定位在跨越特定阈值后为固 ...
- CSS中 定位position 和 transform 移动元素的比较
主要解决问题: 在使用 transform: translate(50%,50%); 平移元素后,再用 offsetLeft 和offsetTop 获取该元素距离 body 左侧距离时,无法获取经 t ...
- CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
最新文章
- 教你修改Linux下高并发socket最大连接数所受的各种限制
- Go进阶(1): Golang + Goland 研究Redis的基本操作与函数接口
- 《软件测试方法和技术》 读书笔记
- 如何编写自己的Java / Scala调试器
- Linux并发服务器编程之多线程并发服务器
- html:(28):后代选择器和通用选择器
- Spring的PropertyPlaceholderConfigurer应用
- 看寄存代码中的方式时,一定要看到方法的底部 (有时代码会在finally中写东西) 。
- 《代码的未来》读书笔记:内存管理与GC那点事儿
- SSM整合(spring mybatis)图书
- 利用 Web Share API 将网页分享到 App(下)
- java反编译工具--jd-gui
- JavaAwtSwing笔记之 Frame和JFrame的区别
- 通过一个例子快速上手矩阵求导
- qiime2-2022.8基于ubuntu的安装教程
- L1-030 一帮一
- 阿里巴巴李云的一封信
- [ FI基本业务流程 ] - Accounts Payable基础知识
- svg爱心小熊眼睛睁开动画
- Semaphore学习