解决移动端下position: sticky; top: 0;导致上方有一丝空隙的问题

在移动端开发中,导航条的position: sticky; top: 0;应用已经很广泛,但是它有一个bug,大约是由于视网膜屏的原因,浏览器对1px的算法总有些问题,导致导航条上方有一丝缝隙,下方的内容会从缝隙中露出来。

怎么办?

曾经试过把top改成-1,但是在滑动过程中,会出现肉眼可见的导航条移动,所以否掉。

最终我的做法是给导航条设上:

.box-shadow-top-1 {
  box-shadow: 0 -1px #fff;
}

也就是用一个不对盒模型尺寸、位置产生任何影响的1像素高的阴影来覆盖掉这个缝隙,可以说没有任何副作用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容