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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
javascript变量声明实例分析
Apr 25 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
Vue常用的全选/反选的示例代码
Feb 19 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php实现求相对时间函数
2015/06/15 PHP
javascript 跳转代码集合
2009/12/03 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
python分割文件的常用方法
2014/11/01 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
浅析python的Lambda表达式
2019/02/27 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python 实现try重新执行
2019/12/21 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
师德演讲稿范文
2014/05/06 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
党员活动总结
2015/02/04 职场文书
反腐倡廉观后感
2015/06/08 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang