问题描述
头部是一个普通的div，高度是48,头部下面有个固定的banner，手下滑的时候，banner会固定在浏览器最顶部不动。出现的问题是，PC端是好的，手机浏览器向上滑动的时候出现闪动！影响用户体验。
有问题的做法
if ($(window).scrollTop() < 48) { $(".nav ").css("top", 48 - parseInt($(window).scrollTop())); } else { $(".nav ").css("top", "0"); } $(window).scroll(function () { $(".nav ").css("top", "0"); var toplength = parseInt($(window).scrollTop()); if ($(window).scrollTop() < 48) { $(".nav ").css("top", 48 - toplength); } });
这样做手机网站中会出现明显的闪动效果！
改进之后的方法一
if ($(window).scrollTop() < 48) { $(".nav ").stop().animate({ "top": 48 - parseInt($(window).scrollTop()) }, "fast"); } else { $(".nav ").stop().animate({ "top": "0" }, "fast"); } $(window).scroll(function () { var toplength = parseInt($(window).scrollTop()); if ($(window).scrollTop() < 48) { $(".nav ").stop().animate({ "top": 48 - toplength }, "fast"); } else { $(".nav ").stop().animate({ "top": "0" }, "fast"); } });
这样做滑动的时候，有个向上的动画效果，不会出现闪动！
改进之后的方法二
顶部固定的地方，一开始和上面不固定的地方是一体的，不写position:fixed，当要固定的div的offset比scrolltop小的时候，让其固定。（我之前之所以没有用这个方法，是因为整个页面在ios中要引用，当在ios中的时候，头部不出现。）
代码如下：
menuPosition: function() { var m = $(window).scrollTop(), n = $("#idmenuinfo的父亲").offset().top, l = $("#menuinfo"); if (m >= n) { if (!l.hasClass("menuinfo")) { l.addClass("menuinfo") } } else { l.removeClass("menuinfo") } } menuinfo的样式如下： .menuinfo { position: fixed !important; width: 100%; left: 0; top: 0; }
