移动端— position: fixed;固定定位解决方案

时间:2023-03-08 20:24:37

这里有个关键的东西叫做viewport,你经常在页面的头部里可以见到它:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

想起来了吧,就是它让你的页面不会像在桌面上那样显示,玩过windows的放大镜功能吧, 你可以把viewport想象成一个类似的放大镜,fixed的元素是相对整个页面固定位置的,你在屏幕上滑动只是在移动这个所谓的viewport,原来的网页还好好的在那,fixed的内容也没有变过位置,所以说并不是iOS不支持fixed,只是fixed的元素不是相对手机屏幕固定的。换个角度,如果所有fixed的元素都相对屏幕固定,那那些桌面版的网页在手机上还能看吗。

解决方案。1.框架 。有很多手机端框架 已经解决了这个问题

2.用position:absolute,绝对定位 然后通过JS 跟着屏幕滚动而滚动 达到固定定位的效果