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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
javascript常用的方法分享
Jul 01 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 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字符串中插入子字符串方法总结
2016/05/06 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python 的AES加密与解密实现
2019/07/09 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
自我鉴定范文300字
2013/10/01 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
python基于机器学习预测股票交易信号
2021/05/25 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python