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 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
js微信分享API
Oct 11 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
简单的网页广告特效实例
Aug 19 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
JS实现横向轮播图(中级版)
Jan 18 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
Laravel框架使用Redis的方法详解
2018/05/30 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python如何制作英文字典
2019/06/25 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
商业房地产广告语
2014/03/13 职场文书
超市商业计划书
2014/05/04 职场文书
教师演讲稿大全
2014/05/16 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
房产协议书范本2014
2014/09/30 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
干部考核工作总结
2015/08/12 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
深入浅析React中diff算法
2021/05/19 Javascript
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android