导航栏加载时可能出现闪的原因以及解决办法
来源:互联网 发布:app电玩城源码出售 编辑:程序博客网 时间:2024/05/25 13:34
元素闪烁很丑,难解决。
修改 Class 而不是 Style
我在不久前做过一个导航栏,要求其滚动到屏幕顶端后固定。很常见。开始的时候没问题,很快就可以搞定。
nav { position: absolute; top: 60px;}
var scroll=0;var nav=$("nav");var navST=60; //该元素距离网页顶端60px $(window).scroll(function(){ if($(document).scrollTop()>navST && scroll==0){ nav.css({position: "fixed",top: "0"}); scroll=1; } else if($(document).scrollTop()<=navST && scroll==1){ nav.removeAttr("style"); scroll=0; }});
运行很流畅。
做好,我自然就忙着网页内容去了。没曾想,随着页面 JS 的不断增加,导航栏在固定时出现了可怕的闪动。
唔,就是 一下看得见 一下看不见 的东西!
应该有不少人和我一样。百度,无果。谷歌,看不懂,翻译也不行。
不知道真相的我,眼泪 流下来。
哦!一道莫名的亮光从我的眼前闪过!这道亮光里,有希望,,有兴奋,,组成了四个大字:
元素重绘
就在这千万分之一秒,亿万分之一秒 里,我理解了:
nav.css({position: "fixed",top: "0"});
这一句 JS 产生了两次 DOM 写入,影响浏览器渲染页面两次。
使用 $.addClass 语句可以解决。
nav { position: absolute; top: 60px;}.fixed { position: fixed; top: 0;}
var scroll=0;var nav=$("nav");var navST=60; //该元素距离网页顶端60px $(window).scroll(function(){ if($(document).scrollTop()>navST && scroll==0){ nav.addClass("fixed"); scroll=1; } else if($(document).scrollTop()<=navST && scroll==1){ nav.removeClass("fixed"); scroll=0; }});
闪烁问题得到了临时解决。
采用不可见元素减少 DOM 变更产生的运算
“临时” 说法的原因是当 JS 数量再次增加,达到又一新高度后,闪烁问题再现。
原因大概是 $.addClass 时浏览器需要重新计算该元素位置, JS 数量过多使计算过程明显。
不多说,在 HTML 里多放一个包含 .fixed 的宽高为 0 的元素即可解决。
<div class="fixed"></div><nav>something...</nav>
别让这个 div.fixed 显示出来。
至此,全面解决 “动态添加样式导致的元素闪烁” 。
原生 JS 进一步加快速度避免闪烁
jQuery 是个好东西。原生 JS 更是个好东西。
有些 jQuery 代码,被转化为好多条原生 JS 才实现效果。
然而其实只需要一条。
将 jQuery 代码转化为原生 JS 是个加快速度,避免闪烁的不二选择。
var scroll=0;var navST=60; //该元素距离网页顶端60px window.onscroll = function(){ if(document.documentElement.scrollTop || document.body.scrollTop>navST && scroll==0){ document.getElementsByTagName("nav")[0].classList.add("fixed"); scroll=1; } else if(document.documentElement.scrollTop || document.body.scrollTop<=navST && scroll==1){ document.getElementsByTagName("nav")[0].classList.remove("fixed"); scroll=0; }};
阅读全文
0 0
- 导航栏加载时可能出现闪的原因以及解决办法
- 服务器出现宕机可能的原因以及解决办法介绍
- 服务器出现宕机可能的原因以及解决办法
- easyui 向后台传参出现缓存问题的可能原因以及解决办法
- ACM中出现RuntimeError的原因及可能的解决办法
- 加载struts,spring,hibernate出现404错误可能的原因
- 加载struts,spring,hibernate出现404错误可能的原因
- ssh远程登录可能出现的问题以及解决办法
- 出现diskioexception可能的原因
- VMBox挂载共享文件时可能出现的问题以及对应的解决办法
- android中OOM出现的原因,以及解决办法
- TCP 出现分包粘包的原因 以及解决办法
- Javascript 中出现<object>对象未定义的可能原因及解决办法
- LoadRunner测试时出现HTTP-500的可能原因
- makefile 时出现 undefined reference 错误的可能原因
- LoadRunner测试时出现HTTP-500的可能原因
- makefile 时出现 undefined reference 错误的可能原因
- [Unity3D]调用函数时出现NullReferenceException的一个可能原因
- Spring Boot自定义错误页面
- SQL Server定时任务的一些使用场景及方案(一)——日常任务
- 核心如何发表期刊
- do{}while与while()do{}
- Spring mvc中数据在mysql数据库中,数据只能增加成功,不能修改
- 导航栏加载时可能出现闪的原因以及解决办法
- Java数组排序中Comparator接口实现自定义排序
- buntu16.04 源码安装CUDA8.0 tensorflow GPU 踩坑记
- 使用kubeadm安装kubernetes集群
- 算法设计技巧:dovetailing
- 单页 hash 跳转
- 开源项目: FlycoTabLayout
- Python3 File(文件) 方法
- spring boot运行中遇到的问题