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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
实例讲解React 组件生命周期
Jul 08 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编码转换
2012/11/05 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
js实现日期级联效果
2014/01/23 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
internal修饰符起什么作用
2013/12/16 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
采购求职信
2014/03/17 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
关于Vue中的options选项
2022/03/22 Vue.js