本文作者: jsweibo
本文链接: https://jsweibo.github.io/2020/03/28/CSS%E4%B8%AD%E7%9A%84sticky%E5%AE%9A%E4%BD%8D/
摘要
本文主要讲述了:
- 效果
正文
效果
首先想象元素是static
定位:
- 当元素距离 viewport 指定边界的距离大于等于指定的值时,表现得像是
static
定位 - 当元素距离 viewport 指定边界的距离小于指定的值时,表现得像是特殊的
relative
定位。之所以说特殊,是因为sticky
定位会使得元素黏在 viewport 上(就像fixed
定位那样)。黏性定位也由此得名
示例:一进入页面表现得像是static
定位,滚动后表现得像是特殊的relative
定位
1 |
|
示例:一进入页面表现得像是特殊的relative
定位,滚动后仍表现得像是特殊的relative
定位
1 |
|
参考资料
本文作者: jsweibo
本文链接: https://jsweibo.github.io/2020/03/28/CSS%E4%B8%AD%E7%9A%84sticky%E5%AE%9A%E4%BD%8D/
本文对你有帮助?请支持我
- 本文链接: https://jsweibo.github.io/2020/03/28/CSS%E4%B8%AD%E7%9A%84sticky%E5%AE%9A%E4%BD%8D/
- 版权声明: 除非另有说明,否则本网站上的内容根据署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。