移动jQuery纠正网页滑动时div问题的两个例子

顶部固定后，屏幕闪烁。头部是一个普通的div，高度为48。头下有一个固定的横幅。当手向下滑动时，横幅将固定在浏览器的顶部。问题是PC好，手机浏览器上滑就闪！影响用户体验。解决方案1:之前的实践：

if ($(窗口)。scrollTop() 48) { $('。nav ')。css('top '，48 - parseInt($(window))。scroll top()))；}else{ $('。nav ')。css('top '，' 0 ')；} $(窗口)。scroll(function () { $(')。nav ')。css('top '，' 0 ')；var toplength=parseInt($(window)。scroll top())；if ($(窗口)。scrollTop() 48) { $('。nav ')。css('top '，48-toplength)；} });这样手机网站中就会有明显的闪烁效果！改进后练习：

if ($(窗口)。scrollTop() 48) { $('。nav ')。停止()。动画({ ' top ' :48-Parseint($(window))。scrollTop())}，' fast ')；} else { $('。nav ')。停止()。动画({'top': '0'}，' fast ')；}$(窗口)。scroll(function(){ var toplength=ParSeint($(window))。scroll top())；if ($(窗口)。scrollTop() 48) { $('。nav ')。停止()。动画({'top': 48 - toplength}，' fast ')；}else{ $('。nav ')。停止()。动画({'top': '0'}，' fast ')；}});这样滑动时有向上的动画效果，不会有闪烁！解决方案二：思路：顶部固定的地方先和上面不固定的地方整合，位置：fixed不写。当要固定的div的偏移量小于scrolltop时，让它固定。(我之前没有用这个方法的原因是整个页面都需要在ios中引用，而在ios中的时候，页眉是不会出现的。)代码如下：

menupposition : function(){ var m=$(window)。scrolltop()，n=$ ('# idmenuinfo的父亲')。偏移量()。top，l=$(' # menuinfo ')；if (m=n) { if(！l . has class(' menuinfo '){ l . addclass(' menuinfo ')} } else { l . remove class(' menuinfo ')} } menuinfo具有以下样式：menuinfo { position:已修复！重要；宽度： 100%；left : 0；top : 0；div在表层的滑动会导致主体在底层的滑动。身体很长，可以滑动。在身体的头部有一个选择框来模拟下拉。从下拉列表中选择滚动轴，如下图所示。

对我来说，给身体一个溢出是没有用的：隐藏和高度。在手机网站上，背景还是可以滑动的，然后我给主体一个preventdefault()防止事件，这个是通过主体滑动来防止的，但是在手机上滑动div还是会导致底部主体滑动，我给div一个防止冒泡的事件，这个在手机网站上还是不允许的。关于preventdefault和stopPropagation，我们将在后面解释它们的区别。解决方案：经过反复测试，我发现当卷轴滚到底部时，会触发身体的滑动，所以当事件滚到底部时，我在表面的div上做了一个touchmove块。到达滚动轴的底部，向下滑动以停止事件，向上滑动以打开事件。因此，有必要确定触摸移动的方向。

$(“body”)。on('touchstart '，函数(e){ e . preventdefault()；startX=e . originalevent . changedtouches[0]。pageX，startY=e . originalevent . changedtouches[0]。佩吉；});$(“body”)。on('touchmove '，函数(e){ e . preventdefault()；move endx=e . originalevent . changedtouches[0]。pageX，moveEndY=e . originalevent . changedtouches[0]。pageY，X=moveEndX - startX，Y=moveEndY-startY；if(math . ABS(X)math . ABS(Y)X 0){ alert('左2右')；} else if(math . ABS(X)math . ABS(Y)X 0){ alert('右2左')；} else if(math . ABS(Y)math . ABS(X)Y 0){ alert(' top 2 bottom ')；} else if(math . ABS(Y)math . ABS(X)Y 0){ alert('底部2顶部')；} else{ alert('只需触摸')；}});以上方法是判断touchmove的滑动方向。

$('#haorooms底层背景').绑定(' touchmove '，函数(e){ e . prevent default()；});$('.滚动的父亲').bind('touchstart '，function(events){ startY=events。原创。changed touch[0 ].佩吉；});$('.滚动的父亲ul ').绑定(' touchmove '，函数(e) { var ulheight=$(this).高度();var scrollTop=$(this).滚动顶部()；var scrollheight=$(this)[0].scrollHeightif(ulheight滚动顶部20=滚动高度){//滚到底部20px左右$('.滚动的父亲').bind('touchmove '，function(event){ moveEndY=event。原创。changed touch[0 ].pageY，ThE=moveEndY-startY；if(ThEr 0){//用上面的abs()更加准确！$('.滚动的父亲').解除绑定('触摸移动')；} if(ThEr 0){ event。PreventDefault()；} }) } if (scrollTop 20) {//滚到顶部20px左右$('.滚动的父亲').bind('touchmove '，function(event){ moveEndY=event。原创。changed touch[0 ].pageY，ThE=moveEndY-startY；if(ThEr 0){ event。PreventDefault()；} if(ThEr 0){ $(' .滚动的父亲').解除绑定('触摸移动')；} }) } });