在开发中我们经常遇到页面中间有一个tab切换,随着列表一起滚动,当tab滚动至header或页面顶部时悬浮,列表继续滚动的场景。
此场景有几种解决方案,下面是其中的两种解决方法。
1.使用position和top解决。
position sticky 对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。使用时需要设置距离顶部的距离。
即设置想悬浮元素为{position: sticky; top: 0px;}
但是因为部分浏览器不兼容,所以在部分android机器上会不兼容。