移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离,导航悬浮效果,页面scroll的时候计算滚动条和顶部距离,加fixed就可以了。但移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行。所以手机里这个效果,得等到页面停止滚动,导航才会悬浮。
fixed悬浮又有个大忌,就是iOS里fixed中有input或者textarea,用户在里面输入文字,触发键盘,fixed容器会居中显示,而不是继续悬浮,如下图:
如果你有iPhone,可以用微信扫一扫下面二维码看这个页面的效果。一定要把网页往下滑动,让导航悬浮,再点文本框才会出现。
(demo链接)
所以很多文章里都会说,不要在fixed里用input或者textarea。但这种需求总是会有,无法逃避。碰巧今天运气好,投机取巧的解决了这个问题,如果有跟我差不多需求的同学,可以尝试一下这个方法。
前提:需要加fastclick这个js库,作用是为了去掉移动端上点击页面300毫秒延迟。
继续用iPhone扫二维码吧:
(demo链接)
原理很简单,你看到的文本框,其实是一个标签模拟的,实际悬浮文本框一开始被隐藏起来了。当点击模拟文本框时,锁住整个页面的同时,隐藏模拟文本框,显示实际悬浮文本框。
具体是为什么,我不知道。要问iOS为什么这样设计,我也不知道。
现存问题:Android设备UC浏览器弹不出来键盘。
ios总是很蛋疼。。
滚动时不加载 JS 是移动端的通病吧…
先赞 一个!! 😛
哈哈 都开始移动端开发了 🙄
还在用安卓的穷屌路过。
延迟那个用touch事件好了,不要用click
我觉得还是有个BUG,第二个DEMO 页面滑到最下面然后文本输入完毕后整个页面有重新回到页面顶部。
锁屏后,默认会回到顶部,这个无解。
后来又有个flexbox的办法,不过部分情况下可以使用,下次加上
快加上吧,大官人
http://ximan.github.io/mobile-layout-example/layout-2.html
把footer里放input就行
做移动端页面的时候,也是需要这个问题
网上还有个方法 说是通过文本框获得焦点的时候改变定位样式 为static 或者relative这种占空间的,等失去焦点的 时候在回到fixed设置