移动端里对悬浮效果支持不是很好。例如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设置