使用vue指令实现吸顶效果
作者：烂橘子妙用
要想实现一个吸顶效果不是很难,网络上有很多教程,其中有一种就是通过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指令实现吸顶内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！