这篇文章发布于 2022年04月22日,星期五,14:28,归类于 CSS相关。 阅读 13160 次, 今日 1 次 6 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10316 鑫空间-鑫生活
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
一、先看下效果
如下 MP4 视频示意(不动点击播放),可以看到默认页面的 header 头部元素高度挺高的,随着滚动的进行,头部固定定位了,同时高度也变小了,减小对页面高度的占用。
眼见为实,您可以狠狠地点击这里:头部标题导航高度自动伸缩demo
如何实现的呢?
二、双 Sticky 粘性定位
需要悬浮固定的元素内外两层嵌套,假设如下HTML代码:
<header> <header-inner> ... </header-inner> </header>
则核心的 CSS 是这样的:
header { --height-outer: 120px; --height-inner: 60px; /* by zhangxinxu */ display: flex; align-items: center; position: sticky; height: var(--height-outer); top: calc(var(--height-inner) - var(--height-outer)); } header-inner { display: flex; line-height: var(--height-inner); position: sticky; top: 0; }
就可以实现这个实用的小交互效果了。
具体实现描述如下:
外层元素粘性定位,设置 top 属性值为负的内外高度的差值,内层元素也是粘性定位,设置 top 属性值为 0,保证吸顶效果。
学会了么?
赶快在自己的项目中使用吧。
本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=10316
(本篇完)
- 深入理解position sticky粘性定位的计算规则 (0.852)
- 纯CSS实现标题栏、表格头水平滚动垂直不滚动 (0.852)
- CSS fixed固定定位transofrm失效及居中小技巧 (0.852)
- 杀了个回马枪,还是说说position:sticky吧 (0.481)
- IE6下z-index犯癫不起作用bug的初步研究 (0.185)
- CSS <position>值简介理解background百分比定位 (0.185)
- 快速了解CSS display:flow-root声明 (0.185)
- CSS值类型文档大全 (0.148)
- CSS flex属性深入理解 (0.148)
- Oh My God,CSS flex-basis原来有这么多细节 (0.148)
- flex-end为什么overflow无法滚动及解决方法 (RANDOM - 0.148)
666
为啥我的完全一模一样没反应的
看看有没有设置 overflow:hidden?
6得飞起,我一直用js。。
赞?
666啊