运用 position:sticky 实现头部导航栏固定

position:sticky,它是相对定位(position:relative)和固定定位(position:fixed)的混合。
使用它,我们不再用监听scroll事件,即可实现导航栏滚动绝对定位的效果。

设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

猜你喜欢

转载自blog.csdn.net/qq_34527715/article/details/88402975