移动端jQuery修正Web页面滑动时div问题的两则实例.pdf

这篇文章主要介绍了移动端 jQuery 修正 Web 页面滑动时 div 问题的两则实例 ,分别针对 顶部固定 fixed 不为 0 时滑动出现的闪动以及 touchmove 的受阻止的相关问题 ,需要的朋友可 以参考下 顶部固定时划屏出现闪动 头部是一个普通的 div ，高度是 48, 头部下面有个固定的 banner，手下滑的时候， banner 会固定在浏览器最顶部不动。出现的问题是， PC 端是好的，手机浏览器向上滑动的时候出 现闪动！影响用户体验。 解决方法一： 之前的做法： if ($(window).scrollTop() < 48) { &nbsp; &nbsp;$(".nav ").css("top", 48 - parseInt($(window).scrollTop())); &nbsp; }else{ &nbsp; &nbsp;$(".nav ").css("top", "0");&nbsp; &nbsp; } &nbsp;$(window).scroll(function () { &nbsp; $(".nav ").css("top", "0"); &nbsp; var toplength = parseInt($(window).scrollTop()); &nbsp; if ($(window).scrollTop() < 48) { &nbsp; &nbsp;$(".nav ").css("top", 48 - toplength); &nbsp; } }); 这样做手机网站中会出现明显的闪动效果！ 改进之后的做法： if ($(window).scrollTop() < 48) { &nbsp; &nbsp;$(".nav ").stop().animate({"top":48 - parseInt($(window).scrollTop())},"fast"); &nbsp; } else { &nbsp; &nbsp;$(".nav ").stop().animate({"top": "0"},"fast"); &nbsp; } $(window).scroll(function () { &nbsp; &nbsp;var toplength = parseInt($(window).scrollTop()); &nbsp; &nbsp;if ($(window).scrollTop() < 48) { &nbsp; &nbsp; $(".nav ").stop().animate({"top": 48 - toplength},"fast"); &nbsp; &nbsp;}else{ &nbsp; &nbsp;$(".nav ").stop().animate({"top": "0"},"fast");&nbsp; &nbsp; &nbsp;} }); 这样做滑动的时候，有个向上的动画效果，不会出现闪动！ 解决方法二： 思路：顶部固定的地方，一开始和上面不固定的地方是一体的，不写 position:fixed ，当 要固定的 div 的 offset 比 scrolltop 小的时候， 让其固定。 （我之前之所以没有用这个方法， 是 因为整个页面在 ios 中要引用，当在 ios 中的时候，头部不出现。 ） 代码如下 : menuPosition: function() { &nbsp; &nbsp;v