在端开发中&＃xff0c;iOS 中有一种独特的效果「悬停」&＃xff0c;当滚动到某个位置时&＃xff0c;某个 view 会悬停到某个位置不动&＃xff0c;比如微信通讯录的字母标签当滑动的时候字母标签会悬停。
在 web 中通过 position: sticky来实现这种效果。我觉得下面这段英文更能让你理解 sticky 的作用&＃xff1a;This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.This can be used to for example cause a navigation bar to scroll with the page until a certain point, and then stick to the top of the page.---- MDN
我们通过 sticky 实现一个悬停效果&＃xff0c;当滑动到某个位置时&＃xff0c;用户信息会悬停在顶部&＃xff1a;
推荐阅读&＃xff1a;
第3天 - Web UI 布局方式&＃xff08;二&＃xff09;Position
图解CSS - 搞懂基本布局 position
第2天 - Web UI 布局&＃xff08;一&＃xff09; 流式布局
图解前端
京公网安备 11010802041100号