position: sticky 详解

article/2025/9/22 17:47:36

sticky 的本意是粘糊糊的,但在 css 中的表现更像是吸附。**常见的吸顶、吸底(移动端网站的头部返回栏,底部切换栏之类)的效果用这个属性非常适合。**例如下图中的导航,也可以点链接看实际效果。
在这里插入图片描述
导航的效果更像是在页面打开的时候是 relative 的,向下滑动的时候 fixed 并且 top:0 为零。

而 sticky 代码仅需要如下:

.sticky {position: sticky;position: -webkit-sticky;top: 0;
}
.searchAndTab {position: sticky !important;top: 0;
}

特性(坑)

  1. 1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里
  2. 样式表 z-index 无效。行内 style 写有效。
  3. sticky 是容器相关的,也就说 sticky 的特性只会在他所处的容器里生效。强调这一点是因为在实际使用中,碰到 body 设置 height:100% 的时候 sticky 元素停在某一个位置不动了。

http://chatgpt.dhexx.cn/article/pYPP2qIx.shtml

相关文章

css之sticky定位

1.属性介绍: sticky定位(粘性定位),指的是基于用户的滚动位置来定位,默认情况下它表现就和relative定位一样,但是当页面滚动区域大于你的目标区域(即sticky对应的元素区域)时&#…

python中sticky_position: sticky 详解(防坑指南)

写这篇文章的原因是无论中文还是英文关于 sticky 的文章,只是说了 sticky 这个性感的 css 新特性可以拿来用,简单写一个 demo 完事,并没有详细的解析它。我希望这篇文章能帮助大家在使用 sticky 的时候更顺手。 属性效果 sticky 的本意是粘糊…

position:sticky失效问题剖析

sticky失效原因 一、position:sticky生效的原理二、正常的Demo二、position: stick生效与失效原理2.1 参考滚动父级元素是body2.2 参考滚动父级元素是自己设置的内部元素 总结 一、position:sticky生效的原理 在 W3 官方文档中的定义是:Sticky positioning is simi…

Vant2 源码分析之 vant-sticky

前言 原打算借鉴 vant-sticky 源码,实现业务需求的某个功能,第一眼看以为看懂了,拿来用的时候,才发现一知半解。看第二遍时,对不起,是我肤浅了。这里侧重分析实现原理,其他部分不拓展开来&…

position:sticky

1、position:sticky简介 设置了position:sticky的元素并不会脱离文档流。 当元素在区域内,元素不受定位的影响(top、left等设置无效)当发生滚动,元素就要移出区域时,定位又会变成fixed,根据设置的left、t…

css粘性定位position:sticky

前言: css3中有一个很有趣的属性position:sticky,粘性属性,效果是一个吸顶效果,可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中&#x…

position:sticky 粘性定位

1、什么是粘性定位? 粘性定位它基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position…

position: sticky 属性

关于 position 属性主要有五个值: static relative fixed absolute sticky 常见的就是 relative 和 absolute 这两个属性。 relative 表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。 ab…

position的属性(sticky属性)

position的属性 对position所有的属性的介绍sticky属性定义demosticky生效以及失效 fixed属性定义demo absolute属性定义demo relative属性定义demo static属性定义 对position所有的属性的介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position sticky属性 定义…

css定位(二)---css中粘性定位(sticky)---C3新增属性

作用:相对定位(position:relative)和固定定位(position:fixed)的混合。sticky相当于加了一个滚动事件的处理,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top&…

sticky

sticky position属性中最有意思的就是sticky了,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时&#…

sticky android,Sticky Warriors

《Sticky Warriors》是一款休闲格斗冒险类游戏,各种动画还有游戏当中的角色都会在这款游戏当中出现,简单但是非常硬核的操作,此外你还可以选择战斗的场景,更能烘托战斗的氛围,丰富多样的战斗模式玩法可以体验&#xff…

Mac破解百度云

https://github.com/CodeTips/BaiduNetdiskPlugin-macOS 转载于:https://www.cnblogs.com/wt645631686/p/10910576.html

百度云不限速下载最新破解真好用

大家肯定遇到过这种情况,家里的宽带明明就是 百兆光纤,为什么用百度云下载速度却是可怜几十kb/s? 其他工具下载速度却是正常,其实大家都知道这个是百度云限速了,为了让你冲会员,不择手段!!! 房贷要还,还要吃饭,该省的一分都不想…

百度云破解不限速版(绿色免安装)

百度云限速导致下载教程耗费大量的时间,给各位分享一个破解版的百度云。 百度云破解不限速版: 下载地址:链接: http://pan.baidu.com/s/1nuAF6LN 密码: c7jv 如果链接失效了直接向我反馈 下载地址:http://feixueteam.net/th…

破解版百度云【亲测好用】完美解决限速

现在百度云由于各种限制,下载速度非常的慢,今天用百度下载东西,感觉太慢,在网上无意间发现了一款不限速版的百度云,好的工具在这里一定要和大家分享了。, 咱们先来看看下载速度,我这里应该是10…

[不限速百度云]两款百度网盘破解版分享

Pandownload 简介 这个破解版百度云可以说是很经典了,由吾爱破解大神倾情制作。 缺点是使用自己的账号,容易被度受限速,好几天才能恢复 特别说明:使用前请登录百度账号! 下崽链接 https://www.lanzous.com/i51s9wf…

极速下载!利用插件破解百度云限速

首发地址:【原创达人】极速下载!利用插件破解百度云限速 http://club.lenovo.com.cn/thread-2781576-1-1.html (出处: 联想社区) 百度网盘真的是个好东西,但他让人又爱又恨,容量大,资源多给我们带来了很大的方便&…

X Chen笔记---百度云破解限速

http://blog.csdn.net/qq_29922333/article/details/55051619 http://chromecj.com/utilities/2015-04/423.html 原理 使用User-Agent-Switcher-for-Chrome这个插件,将window的浏览器模拟成safari浏览器,就可以不使用云盘来下载文件,使用…

从零开始速通百度云网盘

原文链接:CCR39のLazyNest 相信大家在网上冲浪时时常会下载一些资源、软件,如果你需要下载别人分享的资源时,就需要用到网盘。 百度云网盘由于早期在国内占据了一定规模的市场,拥有大量的资源与链接,直至目前&#x…