vue 吸顶效果，开始随页面滚动，滚动到指定位置固定在顶部或者固定在指定位置

首先找到需要加吸顶的元素加上id和样式

• 我这里是给页面左侧导航加吸顶，在外层div加id,里层div加样式

<div class="asset-main-wrapper" id="menuFlag">
	<el-row class="asset-main-wrapper-part">
		<el-col :span="4"  >
			<div  :class="whether ? 'isFixed' : ''">
				<el-row>
					<div class="data-theme point-click" :class="allData" @click="changeTreeNodeStatus()">
						<el-col :span="3">
							<img class="float-left" style="margin-right: 10px;margin-top: 7px;" src="../../../../public/img/assetCatalogue/icon-theme.png" alt="">
						</el-col>
						<el-col :span="17">
							全部数据主题
						</el-col>
						<el-col :span="4">
							{
   
   {countData}}
						</el-col>
					</div>
				</el-row>
				<el-row class="asset-catalogue-nav"  >
					<!-- 左侧目录菜单 -->
					<asset-tree ref="assetTree" :nodeKey="nodeKey" :data="navData" @handleNodeClick="handleNodeClick"></asset-tree>
				</el-row>
			</div>
		</el-col>
	</el-row>
</div>

吸顶效果样式

.isFixed {
  position: fixed;
  top: 0;
  z-index: 1000;
}

声明方法 计算样式是否显示

handleScroll () {
     //计算滚动条位置
	 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	 //计算绑定div位置
	 var offsetTop = document.querySelector('#menuFlag').offsetTop;
	 //进行比较设置位置fixed
	 this.whether = scrollTop > offsetTop;
},

在mounted中监听页面滚动事件,并调用计算位置方法

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll)
},