首页 > 社区 > BUG提交区 > 网站导航栏闪耀原因分析
查看:602 | 回复:8
网站导航栏闪耀原因分析
网站导航栏闪耀原因分析
  • SHK1988 • 钻V

    经验等级:LV.12笑傲江湖

    楼主
    发表时间:2017-04-17 15:52:33 只看楼主
    相关代码摘抄
    /resources/js/base.js

    /resources/css/style.css


    原因分析
    menuFixed变量在初始化时复制281
    用$(window).scroll()添加事件,判断当前滚动位置$(this).scrollTop()>menuFixed,添加或删除$('#J_MenuFixed')的"menu-fixed"属性。

    改算法在ie,手机qq浏览区中无闪烁现象,但是会出现窗口跳动现象。因为导航栏不在占用页面高度,于是后面的内容全体上移80。
    导航栏高度为80。而在chrome中,当一个元素移除时,保持显示内容的位置不变。这样视觉效果更好了,不愧是Chrome。于是滚动位置就减少了80。Chrome即使不滚动窗口,滚动事件也会被经常的调用,可能是页面中自己会动的部分有很多。于是导航栏就快速闪耀了。
    该话题由 SHK1988 于2024-04-19 00:33:31最后编辑
    回复
  • SHK1988 • 钻V

    经验等级:LV.12笑傲江湖

    1F
    发表时间:2017-04-17 15:53:24
    解决办法一:
    resources/js/base.js
    第489行
    } else {
    改为
    } else if($(this).scrollTop()<menuFixed-80){
    回复
  • SHK1988 • 钻V

    经验等级:LV.12笑傲江湖

    2F
    发表时间:2017-04-17 15:53:31
    这里的80可以使用一个变量存储下来parseInt($('#J_MenuFixed').outerHeight())的值。
    这样就解决了Chrome的闪烁问题,但其他浏览器的跳跃问题依旧。
    回复
  • SHK1988 • 钻V

    经验等级:LV.12笑傲江湖

    3F
    发表时间:2017-04-17 15:53:40
    解决办法二:
    另外插入一个不显示的导航栏,需要时再显示出来。这样页面的长度就不会发生变化了。Chrome不会发生闪烁,其他浏览器也不会跳跃。
    回复
  • SHK1988 • 钻V

    经验等级:LV.12笑傲江湖

    4F
    发表时间:2017-04-17 15:54:59
    我的Chrome版本
    Chrome57.0.2987.110 (正式版本) (32 位)
    操作系统Windows 8.1
    JSV8 5.7.492.65
    回复
  • ̕ • 高V

    经验等级:LV.12笑傲江湖

    5F
    发表时间:2017-04-17 17:55:21
    膜拜大佬_(:3」∠)_
    回复
  • 不定形参 • 钻V

    经验等级:LV.15土豪宗师

    6F
    发表时间:2017-04-17 19:41:05
    解决方案2比较好
    回复
  • 书客测试小助手 • 高V

    经验等级:LV.6出类拔萃

    7F
    发表时间:2017-04-18 09:51:12
    厉害了╰(*°▽°*)╯,已经反馈了
    回复
  • 书客7220455891 • 钻V

    经验等级:LV.15土豪宗师

    8F
    发表时间:2017-04-18 21:28:44
    但是我的电脑上Chrome上还出现这个问题
    回复
发表回复
0/500