vue 中固定導航欄的實例代碼

更新時間：2019年11月01日 10:33:54 作者：徹夜不歸

今天小編就為大家分享一篇vue 中固定導航欄的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

點擊按鈕回頂

<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>

固定導航欄案例

<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>