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

移动端jQuery修正Web页面滑动时div问题的两则实例 这篇文章主要介绍了移动端jQuery修正Web页面滑动 时div问题的两则实例，分别针对顶部固定fixed不为0时 滑动出现的闪动以及touchmove的受阻止的相关问题，需要 的朋友可以参考下 顶部固定时划屏出现闪动 头部是一个普通的div,高度是4头部下面有个固定 的banner,手下滑的时候，banner会固定在浏览器最顶部 不动。出现的问题是，P C端是好的，手机浏览器向上滑动 的时候出现闪动！影响用户体验。 解决方法一： 之前的做法： if($(window ).scrollTop ()It;48) { nbsp;nbsp;$ (. nav).cs s(top, 48-parselnt($( window). scr ollTop ())); nbsp;}else{ nbsp;nbsp ;$nav). css(top, 0);nbsp; nb sp;} nbsp; $ (window). s croll (funct ion () { nbs p; $ (. nav). css (top, 0); nbsp ;vartopleng th=parselnt ($(window). scrollTop()); nbsp;if ($(window). scrollTop()It;48) { nb sp; nbsp; $ (〃? nav〃)? css (〃top〃, 48~to plength); nb sp;} }); 这样做手机网站中会出现明显的闪动效果！ 改进之后的做法： if ($ (win dow). scroll Top () It ;48) { nbsp;nbs p;$(〃? nov〃)? stop ()? ani mate ({top : 48- parseln t ($ (window). scrollTop())}, 〃fast〃)； nbsp;}else { nbsp; nbs p; $ (〃? nav〃) ? stop ()? ani mate({top:0}, fast ”)； nbsp;} $ (window). s croll (funct ion () { nbs p;nbsp;vart oplength二pa rselnt($(wi ndow). scrol ITop ()); n bsp;nbsp;if ($(window). scrollTop ()It;48) { nb sp;nbsp;$(〃. nav〃). stop ()? animate({top:48-t oplength}, 〃fast〃)； nbsp :nbsp;}else { nbsp; nbs p; $ (〃? nav〃) ? stop ()? ani mate ({top :〃0}, fast “); nbsp; nbs p;nbsp;} })； 这样做滑动的时候，有个向上的动画效果，不会出现 闪动！ 解决方法二： 思路：顶部固定的地方，一开始和上面不固定的地方 是一体的，不写position: xed,当要固定的di v的 offset比sc rolltop小的时候，让其固定。(我之前之所 以没有用这个方法，是因为整个页面在iOS中要引用，当 在iOS中的时候，头部不出现。) 代码如下： menuP osition:fun ction() { n bspjnbsp; va rm=$ (window ). scrollTop (), nbsp; n bsp;nbsp;n= $(〃#idme nui nfo 的父亲〃).of fset (). top, nbspjnbsp ; 1=$ (/z#menu info〃)； nb sp;nbsp;if(mgt;=n){ n bsp; nbsp; if (! 1. hasClas s (menuinfo “)) { nbsp; nbsp; nbsp; 1 ? addClass (〃menuinfo〃) n bsp;nbsp;} n bspjnbsp; }e Ise { nbsp; nbsp; L remo veClass (me nuinfo) nbs p;nbsp;} nbs p;} menuinfo的样式如下： .menu info{ nbsp : position:f ixed! import ant: nbspjwi dth: 100%; nb sp; left :0; n bsp;top:0; } 表层div滑动、导致底层body滑动 bo dy很长，可以滑动，b ody头部有一个模拟下拉的 选择框。下拉选择有滚动轴，如下图。 我给body 一个over flow： hidden和高度是没有用的。 手机网站