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

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

• 本次使用框架为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. 完成。