夏日博客

A-A+

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

2016年01月11日 前端设计 暂无评论 阅读 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.   position: fixed!important;  
  3.   width: 100%;  
  4.   left: 0;  
  5.   top: 0;  
  6. }  

期待更好的解决方案！

标签：

给我留言