快捷導航

使用vue指令實現(xiàn)吸頂效果

更新時間：2023年11月17日 11:56:49 作者：爛橘子妙用

要想實現(xiàn)一個吸頂效果不是很難,網(wǎng)絡(luò)上有很多教程,其中有一種就是通過fiexd加top來實現(xiàn),今天突然就想做一個吸頂效果,因為最近都在用vue,所以想用vue來做一個吸頂效果的案例,感興趣的朋友可以參考下

實現(xiàn)思路

獲取當前dom節(jié)點相對offsetParent的offsetTop，將這個offsetTop保存起來（防止當前dom的position為fixed時導致offsetTop重置為0）。
監(jiān)聽頁面滑動距離，當滑動距離-offsetTop>0的時候，當前dom節(jié)點就吸頂，反之恢復之前狀態(tài)。

實現(xiàn)代碼

話不多說上代碼：

export default {
  stick: {
    bind: (el, binding, vnode) => {
      let oldOffsetTop = null; // 保存當前元素的offsetTop，防止吸頂后offsetTop重置為0
      addEventListener('scroll', e => {
        const scrollTop = window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop// 滾動距離
        const { offsetTop } = el // 元素距離offsetParent的距離
        if (!oldOffsetTop) oldOffsetTop = offsetTop
        if (scrollTop - oldOffsetTop > 0) {
          el.style.position = 'fixed'
          if (binding.value) {
            el.style.top = binding.value + 'px'
          } else {
            el.style.top = '0px'
          }
        } else {
          if (el.style.position === 'fixed') {
            el.style.position = 'static'
          }
        }
      })

    }
  }
}

上述代碼實現(xiàn)了一個吸頂效果的vue指令，最后只需要在main.js文件中將這個指令注冊即可使用。

main.js文件中加入

import directive from './common/directive'
for (const key in directive) {
  Vue.directive(key, directive[key])
}

使用方式：

<li class="stick" v-stick>吸頂效果指令</li>

或者加入偏移量

<li class="stick" v-stick="100">吸頂效果指令</li>

<template>
<div id="app">
  <!-- <starrySky /> -->
  <div class="p"></div>
  <ul>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1222222</li>
   <li class="stick" v-stick>吸頂效果指令</li>
   <li>12222222</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
  </ul>
</div>
</template>

<script>

export default {
  components: {
  }
}
</script>

<style>

#app {
}
.p {
  height: 100vh;
}
ul {
}
li{
  padding: 30px;
}
</style>

到此這篇關(guān)于使用vue指令實現(xiàn)吸頂效果的文章就介紹到這了,更多相關(guān)vue指令實現(xiàn)吸頂內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實現(xiàn)下載文件而非瀏覽器直接打開的方法
對于瀏覽器來說,文本、圖片等可以直接打開的文件,不會進行自動下載,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)下載文件而非瀏覽器直接打開的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05
VueJS頁面渲染之后如何調(diào)用函數(shù)
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue中Pinia的各種詳細說明和使用示例
Pinia是Vue 3的專屬狀態(tài)管理庫,旨在替代Vuex,提供更簡單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項式API,允許跨組件或頁面共享狀態(tài),避免了Vuex中的許多復雜概念,本文介紹Vue中Pinia的各種詳細說明和使用示例,感興趣的朋友一起看看吧
2025-01-01
vue3動態(tài)監(jiān)聽瀏覽器窗口變化實例
這篇文章主要給大家介紹了關(guān)于vue3動態(tài)監(jiān)聽瀏覽器窗口變化的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下
2023-07-07
前端Vue3列表滑動無限加載功能實現(xiàn)
這篇文章主要介紹了前端Vue3列表滑動無限加載功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2025-05-05
如何巧用Vue緩存函數(shù)淺析
有時候不希望已經(jīng)請求過的數(shù)據(jù),再次請求重復執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下
2021-09-09
Vue.js中watchEffect的異步問題及解決方案
在Vue.js 3的Composition API中,watchEffect是一個非常實用的響應(yīng)式API,當我們在watchEffect中使用異步代碼時,往往會遇到一些意想不到的問題,本文將深入探討watchEffect中的異步問題,分析其原理,并提供切實可行的解決方案,需要的朋友可以參考下
2025-06-06
Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
這篇文章主要介紹了Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
淺析vue.js數(shù)組的變異方法
本篇文章給大家分享了vue.js數(shù)組的變異方法的相關(guān)內(nèi)容，有興趣的朋友跟著學習參考下。
2018-06-06
詳解Element 指令clickoutside源碼分析
這篇文章主要介紹了詳解Element 指令clickoutside源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02