vue 中固定导航栏的实例代码


Posted in Javascript onNovember 01, 2019

点击按钮回顶

<template lang="html">

 <div class="gotop-box">
 <i @click="gotop"class="icon topIcon"></i>
 </div>
</template>

<script>

export default {

methods: {

 gotop: function () { // 点击回顶按钮 返回顶部
  setTimeout(()=>{
  document.body.scrollTop = 0
  document.documentElement.scrollTop = 0
  },1000)
 }
 }
}
window.onscroll = function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 const goTop= document.querySelector('.gotop-box')
  if (scrollTop >200) {
   goTop.style.display = 'block'
  } else {
   goTop.style.display = 'none'
  }
}
</script>


<style lang="css">
.topIcon {
 position: fixed;
 bottom: 5rem;
 right: 1rem;
 width: 2rem;
 height: 2rem;
 border-radius: 50%;
 background:url(../assets/images/gotop.png)center center no-repeat;
 background-size: cover;
}
</style>

vue 中固定导航栏的实例代码

vue 中固定导航栏的实例代码

固定导航栏案例

<template> 
 <div>
  <div id="topPart">顶部距离</div>
  <div id="navBar" :class="{isFixed:istabBar}">固定导航栏</div>
  <div id="mainPart">
   <ul>
    <li>内容部分</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
 </div>
</template>


<script>
 export default {
  data () {
   return {
    istabBar: false
   }
  },
  methods: {
   // 添加一个方法 兼容
   handleScroll () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      
     // 固定导航栏
     let topBar = document.querySelector("#topPart");
     let navBar = document.querySelector("#navBar");
     let mainPart = document.querySelector("#mainPart");
     if (scrollTop > topBar.offsetHeight){
      this.istabBar = true
      mainPart.style.paddingTop = navBar.offsetHeight + "px";
     } else {
      this.istabBar = false
      mainPart.style.paddingTop = "0px";
     }
   }
  },
  mounted () {
   window.addEventListener('scroll', this.handleScroll); // Dom树加载完毕
  },
  destroyed () {
   window.removeEventListener('scroll', this.handleScroll) // 销毁页面时清除
  }
 }
</script>


<style> 
 #topPart{
  width: 100%;
  height: 100px;
  background-color: yellow;
 }
 .isFixed {
  position: fixed;
  top: 0;
  z-index: 10;
 }
 #navBar {
  width: 100%;
  height: 50px;
  background-color: red;
 }
 #mainPart {
  width: 100%;
 }
 #mainPart ul {
  width: 100%;
 }
 #mainPart ul li {
  width: 100%;
  height: 40px;
  background-color: orange;
  margin-bottom: 10px;
 }
</style>

vue 中固定导航栏的实例代码

以上这篇vue 中固定导航栏的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 #Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 #Javascript
Vue实现导航栏的显示开关控制
Nov 01 #Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 #Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 #Javascript
Vue中jsx不完全应用指南小结
Nov 01 #Javascript
vue导航栏部分的动态渲染实例
Nov 01 #Javascript
You might like
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
jquery 插件学习(二)
2012/08/06 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python爬虫模拟登录带验证码网站
2016/01/22 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
会计自我鉴定
2013/11/02 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
优秀求职信范文分享
2014/01/26 职场文书
文明学生事迹材料
2014/01/29 职场文书
2014年采购工作总结
2014/11/20 职场文书
九寨沟导游词
2015/02/02 职场文书
微观世界观后感
2015/06/10 职场文书
公司董事任命书
2015/09/21 职场文书
详解Nginx 工作原理
2021/03/31 Servers
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
如何用python反转图片,视频
2021/04/24 Python