手机网站顶部固定闪烁问题解决办法

问题描述

头部是一个普通的div，高度是48,头部下面有个固定的banner，手下滑的时候，banner会固定在浏览器最顶部不动。出现的问题是，PC端是好的，手机浏览器向上滑动的时候出现闪动！影响用户体验。

之前的做法

if ($(window).scrollTop() $(".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() $(".nav ").css("top", 48 - toplength);
}
});
这样做手机网站中会出现明显的闪动效果！

改进之后的做法

if ($(window).scrollTop() $(".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() $(".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;
}
期待更好的解决方案！