vue实现滚动到某一位置元素进行吸顶操作

1、创建一个空白的元素和要进行吸顶的元素样式一样 进行占位操作

<!-- 垫子 -->

<div class="nav-shadow" v-if="isSetTop"></div>

<div class="info-nav" v-if="!isSetTop">

<swiper :options="infoNavOption" ref="infoSwiper">

<swiper-slide v-for="slide in infoNavTxt" :key="slide.layoutId">

<p :class="['marquee-txt',currentIndex==slide.layoutId?'active':'']" @click="changeNav(slide)" >{{slide.name}}</p>

</swiper-slide>

</swiper>

</div>

2、监测滚动事件

handleScroll: function(e) {

var scrollTop = this.$refs.scroll.scrollTop;var scrollTop = document.querySelector(".vue-slim-better-scroll__wrapper") .scrollTop;//导航条距离

var scrollTopTab = Math.abs(e.y) 

console.log('scrollTopTab'+scrollTopTab);

let offsetTop = document.querySelector(".second-nav").offsetTop + 128; //此处是先获取的要吸顶元素的上兄弟元素(加上该元素的高就可以获得要吸顶元素的offsetTop值)

console.log('offsetTop'+offsetTop) 

if(this.infoBoxFixed){

console.log('改变了transform样式')if (scrollTopTab >= offsetTop) {this.isSetTop = true;

} else {

this.isSetTop = false;

}

3、这么做的原因是 因为吸顶元素的父元素有transform属性  并且不能为none  所以导致直接对吸顶元素进行fixed样式的变化无效 所以才这么做

ps：第一次写这个 感觉编辑器用着好难受  只粘贴了重要部分的代码