js 吸顶效果
2023-12-20 18:31:44
通过js监听滚动条事件来实现吸顶效果,该方法接受一个dom参数,返回 一个解绑事件的方法。
export function useCeiling(el) {
const parentNode = el.parentNode;
const parentTop = parentNode.offsetTop;
// 子组件距离父组件顶部的距离
const childTop = el.offsetTop - parentTop;
const childLeft = el.offsetLeft - parentNode.offsetLeft;
parentNode.addEventListener('scroll', bindEvent);
function bindEvent() {
if (this.scrollTop >= childTop) {
el.style.position = 'fixed';
el.style.top = `${parentTop}px`;
el.style.left = `${childLeft}px`;
el.style.zIndex = '9999';
} else {
el.style.position = 'static';
}
}
function unBind() {
parentNode.removeEventListener('scroll', bindEvent);
}
return {
unBind
}
}
在Vue中使用
<template>
<div class="frame" ref="frame">
<div style="height: 600px"></div>
<div class="child" ref="child"></div>
<div style="height: 1200px"></div>
</div>
</template>
<script>
import {useCeiling} from "@/views/js/UseVue";
let unbindObj = {};
export default {
name: "Ceiling",
methods: {
init() {
unbindObj = useCeiling(this.$refs.child);
}
},
mounted() {
this.init();
},
destroyed() {
const {unBind} = unbindObj;
typeof unBind === 'function' && unBind();
}
}
</script>
<style scoped>
.frame {
width: 100%;
height: 500px;
background-color: #42b983;
overflow: auto;
position: relative;
}
.child {
width: 100%;
height: 100px;
background-color: #fff;
}
</style>
文章来源:https://blog.csdn.net/qq_41742576/article/details/135112496
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!