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

ゞ浴缸里的玫瑰 2022-08-31 14:27 192阅读 0赞

## 首先找到需要加吸顶的元素加上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)
    },