关于监听滚轮事件进行页面的某一项定位
-
本次使用框架为
vue
,在进行本次个人博客页面工作的时候需要做这样一件事
-
在滚轮滚到某一地点时,需要将HotArticle,最近访客。页面进行定位
至这里,以后滚动不会随着移动
实现步骤
原理就是,给标签给一个动态的标签名,通过数据进行更改,来给标签加上样式。
-
当然是先把它建立起来啦,加上样式。
//这里我把代码放在其他文件夹进行引入 1.fixed为建立时的标签名 2.ifTrue为vue通过数据进行对class进行改变 <div class="fixed" :class="ifTrue" > <!-- 热门文章 --> <Personal></Personal> <!-- 最近访客 --> <Visitor></Visitor> </div> 样式 < .fixed.true{ width: 270px; position: fixed; top: 40px; } >
-
给一个初始数据
data(){ return{ ifTrue:'' } },
-
进行监听事件
methods: { //监听滚动高度,到一定位置加上 true 的class名,实现定位 scrollEventFn(){ let scrollTop = document.body.scrollTop || document.documentElement.scrollTop this.ifTrue = scrollTop >= 240 ? 'true' : '' } },
-
进行手动触发
mounted(){ //手动触发一次。然后监听事件 this.scrollEventFn() window.addEventListener('scroll', this.scrollEventFn) }
-
完成。