vue 移动端吸顶效果,开始随页面滚动,滚动到指定位置固定在顶部或者固定在指定位置
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。不同组件多次使用的话,建议在 src 下新建一个 common 文件夹,创建 stickySlot.vue 文件,方便多次复用。为了方便演示,这里使用了for循环的方法将屏幕撑满,直接将全部代码复制运行就能看到效果。通过设置top的值,控制需要固定
·
前言
建议在 src 下新建一个 common 文件夹,新建 stickySlot.vue 文件
stickySlot.vue
<template>
<div class="sticky" :style="getPosition">
<div class="sticky-warp">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
computed: {
getPosition() {
let position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative';
return 'position:' + position;
}
},
mounted() {
this.init();
},
deactivated() {
if (this.cssSupport('position', 'sticky')) {
return;
}
// 复位
let elWarp = this.$el.querySelector('.sticky-warp');
elWarp.position = 'absolute';
},
methods: {
init() {
if (this.cssSupport('position', 'sticky')) {
return;
}
let el = this.$el;
let target = this.$el.parentNode;
let elWarp = this.$el.querySelector('.sticky-warp');
let top = this.getNumberValue(document.defaultView.getComputedStyle(el).top);
this.addScrollListen(target, () => {
if (el.getBoundingClientRect().top <= top) {
elWarp.style.position = 'fixed';
}
if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') {
elWarp.style.position = 'absolute';
}
});
},
cssSupport(attr, value) {
let element = document.createElement('div');
if (attr in element.style) {
element.style[attr] = value;
return element.style[attr] === value;
} else {
return false;
}
},
getNumberValue(pxValue) {
let value = String(pxValue).match(/^\-?\+?[0-9]+/g);
return value ? Number(value) : undefined;
},
addScrollListen(target, cb) {
target.addEventListener('y-scroll', (event) => {
cb && cb(event);
});
}
},
}
</script>
<style>
.sticky {
width: 100%;
}
.sticky .sticky-warp {
width: 100%;
background: inherit;
will-change: change;
height: inherit;
top: inherit;
}
</style>
组件使用
<template>
<div>
<ul>
<li v-for="(item, index) in headerData" :key="index">{{ item }}</li>
</ul>
<!-- 这里需要给组件添加一个class,用于控制固定的位置,看css注释部分 -->
<sticky-slot class="stickyTop">
<div class="tab">假装这是一个tab栏, 当页面滚动的时候要固定在顶部</div>
</sticky-slot>
<ul>
<li v-for="(item, index) in footerData" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
import stickySlot from '@/common/stickySlot.vue';
export default {
components: {
stickySlot
},
data() {
return {
headerData: [],
footerData: []
};
},
mounted() {
// 使用假数据撑满屏幕
for (let i = 0; i < 20; i++) {
this.headerData.push('第' + i + '条数据')
};
for (let i = 20; i < 80; i++) {
this.footerData.push('第' + i + '条数据')
}
}
}
</script>
<style scoped>
/* 通过设置top的值,控制需要固定在什么位置,0是顶部,值为number(px) */
.stickyTop {
top: 0;
z-index: 10;
}
.tab {
height: 30px;
line-height: 30px;
background-color: greenyellow;
}
</style>
效果图
到达顶部的时候固定在顶部,内容部分继续滚动
如果本篇文章对你有帮助的话,很高兴能够帮助上你。
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。
更多推荐
已为社区贡献18条内容
所有评论(0)