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 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
react同构实践之实现自己的同构模板
Mar 13 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 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小偷相关截取函数备忘
2010/11/28 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python实现下载文件的三种方法
2017/02/09 Python
python实现kNN算法
2017/12/20 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
CSS3 简写animation
2012/05/10 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
关于读书的演讲稿300字
2014/08/27 职场文书
活动总结格式
2014/08/30 职场文书
培训班开班主持词
2015/07/02 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Java中的随机数Random
2022/03/17 Java/Android