列表滚动，标题切换fixed固定

最新推荐文章于 2022-06-22 16:48:34 发布

Hong Jet

最新推荐文章于 2022-06-22 16:48:34 发布

阅读量711

点赞数 1

分类专栏： vue开发

本文链接：https://blog.youkuaiyun.com/smlljet/article/details/96475762

版权

vue开发专栏收录该内容

27 篇文章

订阅专栏

本文介绍一种实现列表滚动时标题切换并固定在头部的方法。通过获取数据列表中每一项title的顶部距离，并监听滚动条滚动高度，依据滚动距离与标题距离进行判断，从而实现标题的粘附固定效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下，当列表滚动时标题切换粘附固定头部
在这里插入图片描述

实现思路：在数据列表里面获取到每一项title距离顶部距离，然后监听滚动条滚动高度，根据滚动距离跟列表项title距离高度判断固定。代码如下

<div class="table" id="tab">
  	<div v-for="(item,k) in list">
	  		<div  :class="['title',fiexdItem ==k?'fiexd':'']" >
	    	{{item.name}}
	  		</div>
	  		<div v-for="jtem in item.sub" class="sub">
	  			{{jtem}}
	  		</div>
  	</div>
  </div>

  data () {
    return {
    	fiexdItem:0,
	     list:[
	      {name:'标题1',
	       sub:['北京','上海','重庆','广州']
	      },
	      {name:'标题2',
	      sub:['北京','上海','重庆','广州']
	      },
	      {name:'标题3',
	       sub:['北京','上海','重庆','广州']
	      },
	      {name:'标题4',
	      sub:['北京','上海','重庆','广州']
	      },
	      {name:'标题5',
	       sub:['北京','上海','重庆','广州']
	      },
	      {name:'标题6',
	       sub:['北京','上海','重庆','广州']
	      },
	      {name:'标题7',
	       sub:['北京','上海','重庆','广州']
	      },
	      {name:'标题8',
	       sub:['北京','上海','重庆','广州']
	      },
     ]
    }
  },

	mounted:function(){
		  var temp = document.getElementById('tab');
		  var node = document.getElementsByClassName('title');
		  this.list.map((item,k)=>{
		  	item.top = node[k].offsetTop
		  })
		  var _this =this;
		  window.addEventListener('mousewheel',function(){
		  	for (var i=0;i<_this.list.length;i++) {
		  		if(this.scrollY > _this.list[i].top-20){
		  			_this.fiexdItem = i;
		    	}
		  	}
		  })
	},

<style scoped>
.table{
	width:400px;
  height:600px;
  border: 1px solid #eee;
  margin: 0 auto;
	overflow: scroll;
	display: table;
	padding-top: 40px;
}
.title{
	height: 40px;
	background: #EEEEEE;
}
.sub{
	height: 100px;
}
.fiexd{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}
</style>