vue实现中部导航栏布局功能


Posted in Javascript onJuly 30, 2019

接下来是中部导航栏。我们看到这里的头像动画,和中部导航栏定位都是跟鼠标滚动有关的。我们先将布局实现一下。这里是要求在页面上部分滚动范围内,导航栏一直在div的上部,随着鼠标的滚动而改变位置。到下部分滚动范围,导航栏就一直固定到页面的上部分。

这里需要注意两个地方

这里需要一个覆盖不了的区域,可以给人一种更好开关屏的感觉。而且中部导航栏下方区域的内容,在下滑的时候不能出现在这个区域。

vue实现中部导航栏布局功能

一定要注意 尽可能的少进行DOM操作,这样是非常影响性能的 !

监听鼠标滚动事件

private fixedFlag: boolean = false;
 private unFixedFlag: boolean = true;
 private mounted() {
  window.addEventListener("scroll", this.handleScroll);
 }
 private handleScroll() {
  const scrollTop =
   window.pageYOffset ||
   document.documentElement.scrollTop ||
   document.body.scrollTop;
  if (scrollTop > 300) {
   if (!this.fixedFlag) {
    const obj = document!.getElementById("index-menu");
    const obj2 = document!.getElementById("fake-area");
    obj!.style.position = "fixed";
    obj!.style.top = "77px";
    obj2!.style.position = "fixed";
    obj2!.style.top = "47px";
    this.fixedFlag = true;
    this.unFixedFlag = false;
   }
  } else {
   if (!this.unFixedFlag) {
    const obj = document!.getElementById("index-menu");
    const obj2 = document!.getElementById("fake-area");
    obj!.style.position = "";
    obj!.style.top = "";
    obj2!.style.position = "";
    obj2!.style.top = "";
    this.unFixedFlag = true;
    this.fixedFlag = false;
   }
  }
 }

效果展示

vue实现中部导航栏布局功能

项目地址

https://github.com/pppercyWan...

总结

以上所述是小编给大家介绍的vue实现中部导航栏布局功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
Node 模块原理与用法详解
May 13 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 #Javascript
原生js添加一个或多个类名的方法分析
Jul 30 #Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 #Javascript
You might like
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
小车司机岗位职责
2013/11/25 职场文书
高职教师岗位职责
2013/12/24 职场文书
运动会广播稿80字
2014/01/23 职场文书
中学生自我鉴定
2014/02/04 职场文书
质检部经理岗位职责
2014/02/19 职场文书
兴趣班停课通知
2015/04/24 职场文书
2015大学迎新标语
2015/07/16 职场文书
化工生产实习心得体会
2016/01/22 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL