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 相关文章推荐
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
Bootstrap布局方式详解
May 27 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
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编写大型网站问题集
2007/03/06 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
javascript进行数组追加方法小结
2014/06/16 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
pandas删除指定行详解
2019/04/04 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
2014村务公开实施方案
2014/02/25 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
员工工作表现自我评价
2015/03/06 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python