之前做移动端碰到的一个问题:一个导航栏从不固定--》固定的需求
前提很简单,先计算各种高度,然后再做判断body的滚动高度然后进行样式变换,然而最苦恼的就是样式变换了
一开始方法是 超过高度之后变化position:fixed,在pc端上测试的时候好好的,可是到了移动端之后,会发现屏幕在滑倒超出高度之后(手指没有离开屏幕),并不会即时响应,而是等手指离开屏幕之后导航栏才会fix到最顶部,我一开始以为是不是scroll这个事件在移动端有问题,然后用touchmove还是一样的结果,然后打开电脑调试手机查看响应,然而我明确看到手机滑屏超过高度之后,调试工具里显示的position:fixed已经变化了,但是手机上却没有响应,,之后问了其他人,可能觉得是手机浏览器的优化造成的。。。
今天在aem站看到个这样的导航栏,所以马上用看它的代码,发现它的导航栏是先position :absolute,在滑动之后变为fixed。。。原来还有这样的实现方法,,,所以,为自己进行测试了一下!!真的成功了!!!