脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue指令实现吸顶

使用vue指令实现吸顶效果

 更新时间：2023年11月17日 11:56:49   作者：烂橘子妙用  
要想实现一个吸顶效果不是很难,网络上有很多教程,其中有一种就是通过fiexd加top来实现,今天突然就想做一个吸顶效果,因为最近都在用vue,所以想用vue来做一个吸顶效果的案例,感兴趣的朋友可以参考下

实现思路

  • 获取当前dom节点相对offsetParent的offsetTop，将这个offsetTop保存起来（防止当前dom的position为fixed时导致offsetTop重置为0）。
  • 监听页面滑动距离，当滑动距离-offsetTop>0的时候，当前dom节点就吸顶，反之恢复之前状态。

实现代码

话不多说上代码：

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'
          }
        }
      })

    }
  }
}

上述代码实现了一个吸顶效果的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指令实现吸顶效果的文章就介绍到这了,更多相关vue指令实现吸顶内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue实现下载文件而非浏览器直接打开的方法

    Vue实现下载文件而非浏览器直接打开的方法

    对于浏览器来说,文本、图片等可以直接打开的文件,不会进行自动下载,下面这篇文章主要给大家介绍了关于Vue实现下载文件而非浏览器直接打开的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • VueJS页面渲染之后如何调用函数

    VueJS页面渲染之后如何调用函数

    这篇文章主要介绍了VueJS页面渲染之后如何调用函数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue中Pinia的各种详细说明和使用示例

    Vue中Pinia的各种详细说明和使用示例

    Pinia是Vue 3的专属状态管理库,旨在替代Vuex,提供更简单、直观的状态管理解决方案,它支持组合式API和选项式API,允许跨组件或页面共享状态,避免了Vuex中的许多复杂概念,本文介绍Vue中Pinia的各种详细说明和使用示例,感兴趣的朋友一起看看吧
    2025-01-01
  • vue3动态监听浏览器窗口变化实例

    vue3动态监听浏览器窗口变化实例

    这篇文章主要给大家介绍了关于vue3动态监听浏览器窗口变化的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • 前端Vue3列表滑动无限加载功能实现

    前端Vue3列表滑动无限加载功能实现

    这篇文章主要介绍了前端Vue3列表滑动无限加载功能实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-05-05
  • 如何巧用Vue缓存函数浅析

    如何巧用Vue缓存函数浅析

    有时候不希望已经请求过的数据,再次请求重复执行刷新操作,我们就需要使用数据缓存,这篇文章主要给大家介绍了关于如何巧用Vue缓存函数的相关资料,需要的朋友可以参考下
    2021-09-09
  • Vue.js中watchEffect的异步问题及解决方案

    Vue.js中watchEffect的异步问题及解决方案

    在Vue.js 3的Composition API中,watchEffect是一个非常实用的响应式API,当我们在watchEffect中使用异步代码时,往往会遇到一些意想不到的问题,本文将深入探讨watchEffect中的异步问题,分析其原理,并提供切实可行的解决方案,需要的朋友可以参考下
    2025-06-06
  • Vue3使用vue-router如何实现路由跳转与参数获取

    Vue3使用vue-router如何实现路由跳转与参数获取

    这篇文章主要介绍了Vue3使用vue-router如何实现路由跳转与参数获取，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • 浅析vue.js数组的变异方法

    浅析vue.js数组的变异方法

    本篇文章给大家分享了vue.js数组的变异方法的相关内容，有兴趣的朋友跟着学习参考下。
    2018-06-06
  • 详解Element 指令clickoutside源码分析

    详解Element 指令clickoutside源码分析

    这篇文章主要介绍了详解Element 指令clickoutside源码分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论