position:sticky 给你点个赞

what?

可以看做是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。
较适用于导航的跟随定位效果。(当然还有很多其他的牛逼的效果)

use?

position: -webkit-sticky;
position: sticky;
top: 0;(非必须)
left: 0;(非必须)

attention?

1.父级元素不能有任何overflow:visible以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。
2.同一个父容器中的sticky元素,如果定位值相等,则会重叠;如果属于不同父元素,则会挤开原来的元素,形成依次占位的效果。
3.sticky定位,不仅可以设置top,基于滚动容器上边缘定位;还可以设置bottom,也就是相对底部粘滞。如果是水平滚动,也可以设置left和right值。

你可能感兴趣的:(position:sticky 给你点个赞)