主机格调

移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离,导航悬浮效果,页面scroll的时候计算滚动条和顶部距离,加fixed就可以了。但移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行。所以手机里这个效果,得等到页面停止滚动,导航才会悬浮。

fixed悬浮又有个大忌,就是iOS里fixed中有input或者textarea,用户在里面输入文字,触发键盘,fixed容器会居中显示,而不是继续悬浮,如下图:

如果你有iPhone,可以用微信扫一扫下面二维码看这个页面的效果。一定要把网页往下滑动,让导航悬浮,再点文本框才会出现。

demo链接

所以很多文章里都会说,不要在fixed里用input或者textarea。但这种需求总是会有,无法逃避。碰巧今天运气好,投机取巧的解决了这个问题,如果有跟我差不多需求的同学,可以尝试一下这个方法。

前提:需要加fastclick这个js库,作用是为了去掉移动端上点击页面300毫秒延迟。

继续用iPhone扫二维码吧:

demo链接

原理很简单,你看到的文本框,其实是一个标签模拟的,实际悬浮文本框一开始被隐藏起来了。当点击模拟文本框时,锁住整个页面的同时,隐藏模拟文本框,显示实际悬浮文本框。

具体是为什么,我不知道。要问iOS为什么这样设计,我也不知道。

现存问题:Android设备UC浏览器弹不出来键盘。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/494.html