position: sticky简析

前端比划

共 1149字,需浏览 3分钟

 ·

2021-04-26 01:59

position:sticky粘性吸附布局,过渡平滑,效果棒,移动端网页可优先使用,不失为悬浮导航的理想之选。相比其它的定位属性,相对复杂,sticky是否生效,同时依赖祖先元素。


布局位置跟sticky元素在文档中的static位置和“最近可滚动元素”、“最近的包含块元素”的交叉区域有关。最近的可滚动元素(overflow设置为非visible,没有则为视窗)、最近的包含块元素(块级元素或新建BFC上下文的元素)


当发现sticky无效时,可先确认一下:

1、祖先元素中是否设置了非visible值的overflow规则;

2、识别交叉区域。基本判断的话,垂直滚动,交叉区域底部应该和滚动元素的底部一致。


计算规则理解参考文章:

https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/


https://github.com/w3c/csswg-drafts/issues/865


对比一下,原先一般通过监听滚动事件,调整导航布局为fixed的方式,但还得考虑保持原来导航的高度,通过设置边距或复制一个导航占位来处理,避免跳动。


滚动体验小优化,应用scroll-snap-align指定滚动结束时的停留点。比如水平导航可优化,滚动后显示完整右侧导航项。

.nav-list {  overflow-x: auto; scroll-snap-type: x mandatory;}.nav-list-item {  scroll-snap-align: end;}


跨境网站使用branch进行统计归因比较常见,配置journey引流广告,仅当存在某个meta值不匹配某值才显示banner,目前必须确保该meta存在且值不为空才有效


git合并分支部分提交记录时,可使用git cherry-pick <commitHash值>命令。


基于渐进增强的原则,可以在项目中使用aspect-ratio事先指定replaced元素(如图片)的宽高比,避免渲染时的布局跳动,提升用户体验。


cookieStore,一个新的浏览器原生API,操作cookie的一种替代方式,基于promise的异步形式,提供了便捷方法操作cookie,同时在serviceWorker中也可以访问,未来应该会得到更多主流浏览器厂商支持。

浏览 56
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报