关于监听滚轮事件进行页面的某一项定位

• 本次使用框架为vue,

  在进行本次个人博客页面工作的时候需要做这样一件事

• 在滚轮滚到某一地点时，需要将==HotArticle，最近访客。==页面进行定位

至这里，以后滚动不会随着移动

实现步骤

原理就是，给标签给一个动态的标签名，通过数据进行更改，来给标签加上样式。

1. 当然是先把它建立起来啦,加上样式。

   //这里我把代码放在其他文件夹进行引入
   1.fixed为建立时的标签名
   2.ifTrue为vue通过数据进行对class进行改变
   <div class="fixed" 
       :class="ifTrue"
         >
         <!-- 热门文章 -->
         <Personal></Personal>
         
         <!-- 最近访客 -->
        <Visitor></Visitor>
       </div>
   样式
   <
   .fixed.true{
       width: 270px;
       position: fixed;
       top: 40px;
     }
   >
   

2. 给一个初始数据

    data(){
       return{
         ifTrue:''
       }
     },
   

3. 进行监听事件

    methods: {
       //监听滚动高度,到一定位置加上  true  的class名，实现定位
       scrollEventFn(){
         let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
         
         this.ifTrue = scrollTop >= 240 ? 'true' : ''
       }
     },
   

4. 进行手动触发

   mounted(){
       //手动触发一次。然后监听事件
     this.scrollEventFn()
     window.addEventListener('scroll', this.scrollEventFn)
     }
   

5. 完成。睡觉，