A-A+

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

2016年01月11日 web前端设计 暂无评论 阅读 4 views 次

在做手机网站时我们会碰到滚动在顶部时如果fix不为的话就会出现闪烁的问题,下面小编找了一篇针对此问题的解决方案。

问题描述:

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

之前的做法:

  1. if ($(window).scrollTop() < 48) {  
  2.                $(".nav ").css("top", 48 - parseInt($(window).scrollTop()));  
  3.            }else{  
  4.              $(".nav ").css("top""0");    
  5.            }  
  6.        $(window).scroll(function () {  
  7.            $(".nav ").css("top""0");  
  8.            var toplength = parseInt($(window).scrollTop());  
  9.            if ($(window).scrollTop() < 48) {  
  10.                $(".nav ").css("top", 48 - toplength);  
  11.            }  
  12. });  

这样做手机网站中会出现明显的闪动效果!

改进之后的做法:

  1. if ($(window).scrollTop() < 48) {  
  2.             $(".nav ").stop().animate({"top":48 - parseInt($(window).scrollTop())},"fast");  
  3.         } else {  
  4.             $(".nav ").stop().animate({"top""0"},"fast");  
  5.         }  
  6. $(window).scroll(function () {  
  7.             var toplength = parseInt($(window).scrollTop());  
  8.             if ($(window).scrollTop() < 48) {  
  9.                 $(".nav ").stop().animate({"top": 48 - toplength},"fast");  
  10.             }else{  
  11.             $(".nav ").stop().animate({"top""0"},"fast");   
  12.             }  
  13. });  

这样做滑动的时候,有个向上的动画效果,不会出现闪动!

方法二:

思路:顶部固定的地方,一开始和上面不固定的地方是一体的,不写position:fixed,当要固定的div的offset比scrolltop小的时候,让其固定。(我之前之所以没有用这个方法,是因为整个页面在ios中要引用,当在ios中的时候,头部不出现。)代码如下:

  1. menuPosition: function() {  
  2.             var m = $(window).scrollTop(),   
  3.             n = $("#idmenuinfo的父亲").offset().top,  
  4.             l = $("#menuinfo");  
  5.             if (m >= n) {  
  6.                 if (!l.hasClass("menuinfo")) {  
  7.                     l.addClass("menuinfo")  
  8.                 }  
  9.             } else {  
  10.                 l.removeClass("menuinfo")  
  11.             }  
  12.         }  

menuinfo的样式如下:

  1. .menuinfo {  
  2.   positionfixed!important;  
  3.   width: 100%;  
  4.   left: 0;  
  5.   top: 0;  
  6. }  

期待更好的解决方案!

标签:

给我留言