webapp手机网站顶部固定fixed不为0的情现,滑动出现闪动

约 1442 字     5748 次已读     JavaScript

问题描述

头部是一个普通的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;
}

这样就解决了闪动的情况