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

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

要想實現(xiàn)一個吸頂效果不是很難,網(wǎng)絡上有很多教程,其中有一種就是通過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>

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

您可能感興趣的文章: