纯CSS现在可以检测是否滚动到容器边缘,Scroll Snap边缘,以及sticky元素是否触及定位的边缘了,这个特性还挺实用的。
阅读全文…
标签:@container, Scroll Snap, scroll-state, sticky 发布在 CSS相关 | 11 条评论 »
介绍个我认为最好的固定居中定位的CSS实现,以及展示transform内fixed固定定位失效的解决方法,你说不定哪天就会用到。
标签:absolute, margin:auto, position, sticky, 固定定位, 粘性定位, 绝对定位 发布在 CSS相关 | 9 条评论 »
分享一个实用的小布局效果,可以优化粘性定位的效果体验。
标签:flex布局, position, sticky, 粘性定位 发布在 CSS相关 | 7 条评论 »
本文介绍如何使用纯CSS方法,实现某个元素在水平滚动的时候跟着滚,垂直滚动的时候固定效果,反之同样适用,丰富demo,有视频效果示意,希望可以帮到您的学习。
标签:css相关, position, sticky, 滚动, 滚动条, 粘性定位, 表格 发布在 CSS相关 | 9 条评论 »
sticky粘性定位规则比较复杂,涉及“流盒”(flow box)和“粘性约束矩形”等概念,如果不搞清楚原理,是无法明白明明设置了粘性定位样式却没有效果的原因的。
标签:bottom, css相关, flow box, left, position, right, sticky, top, 定位, 流盒, 滚动, 粘性定位, 粘性约束矩形 发布在 CSS相关 | 25 条评论 »
position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,Chrome什么时候杀了个回马枪,居然又支持了。眼瞅着,各个浏览器纷纷立了山头,要必要关心关心position:sticky了,不要被人留下厚此薄彼的口舌。结果一关心,竟然发现,sticky定位要比预想的更强大,更有趣……
标签:absolute, fixed, position, relative, sticky, 布局, 滚动, 视差滚动 发布在 CSS相关 | 108 条评论 »
张鑫旭more,09年华中科技大学毕业,现上海,就职于阅文集团,专注web前端偏前领域,著有《CSS世界》《CSS选择器世界》《CSS新世界》《HTML并不简单》
邮箱:zhangxinxu@zhangxinxu.com
关注我:微信微博掘金知乎抖音热更B站Gitee