特效 scroll页面滚动顶部固定

1.功能需求

      其实在很多软件开发的过程中，都会有网页头部，例如京东，淘宝等。但细心的就会发现其实这网页的头部不是简单的头部，尤其是我们滑动滚动条的时候，网页的头部是固定的，其实完成这一点其实不难，在CSS中的  position:fixed  这个就可以将其固定，那么具体的实现思路大致是什么呢？

2.页面展示

      稍微粗糙的页面展示如下，当用户在滚动页面的时候就会将头部进行固定，这样无论页面怎么移动，我们都可以看到头部始终停留在我们的页面中，如下面的样例截图一样。那这样的具体实现到底是怎么的呢？其实这里面会有两种实现方法

 

 2.1 CSS完成实现

    我们知道设置了 position:fixed 后，文档就类似于绝对定位这种一样，会脱离文档流，即原本所设置的宽度将不会占位置。即如下，就会将内容部分的东西进行覆盖，这是我们可以通过设置margin-top或者padding-top来强制的设置外边距，这样就表面上看着是固定定位且不占位置。且也能完成需求。

 2.2  JS完成实现

      我们可以通过设置JS来监听scroll，当其滚动到一定值的时候，我们就动态的给头部添加一个Class类，这样来完成固定头部的相关需求(采取vue框架实现)。其实核心的部分就是如下。

      其中我们在这里也会看出一个处理点，就是我们将函数进行了分离，getHeaderFlex()函数用来处理是否固定。但细心的就会发现，我们通过addEventListener后面添加的是箭头函数，而不是function，那是因为function会改变this的指向，会将this指向为window，这样我们就没法通过this来访问vue实例上的相关方法了。因此在这里我们就使用了箭头函数，箭头函数中不存在this，即this的指向就不会存在相关问题

   scrollEvent(){

    //因为这里要使用箭头函数，不然this就会指向windows,而不是vue组件本身

    window.addEventListener('scroll',()=>{

      //我们可以通过scrollY这个属性来判断页面中滚动的距离

      this.getHeaderFlex()

    })

   },

3.相关总结

    其实核心就是采用window下监听scroll的滚动距离来进行对应的判断

    其实实现这一业务场景其实不难，在大多数的情况下，如果只是针对头部固定这种情况，我们大多数都会采取第一种方法，因为如今是组件式的开发，大多数情况下网页的头部都会封装为一个组件，因此我们通过第一种方法来固定头部就很简单。但是如果是侧边栏滚动固定这种的话就需要使用我们上面介绍的相关方法，后续我也会进行相关的更新的。

4.完整代码如下 

<template>
  <div class="MainBox">
    <div class="header" :class="{headerFlex:flexHeader}" ref="header">我是头部</div>
    <div class="main">123123123123123123</div>
  </div>
</template>

<script>
export default {
  name:'flexView',
  data(){
    return{
      flexHeader:false
    }
  },
  mounted(){
    this.scrollEvent()
  },
  methods:{
   //vue中监听这个滚动情况 
   scrollEvent(){
    //因为这里要使用箭头函数，不然this就会指向windows,而不是vue实例本身 
    window.addEventListener('scroll',()=>{
      //我们可以通过scrollY这个属性来判断页面中滚动的距离
      this.getHeaderFlex()
    })
   },
  //用于来得到顶部的相关数据，这里就采用滚动10来将其固定  
   getHeaderFlex(){
    if(window.scrollY >=  10){
      this.flexHeader = true
    }else{
      this.flexHeader = false
    }
   }
  }
}
</script>

<style lang="less" scoped>
.MainBox{
  margin:auto;
  width: 1200px;
  .header{
    // position:fixed;
    width: 1200px;
    height: 150px;
    background: blue;
  }
  .main{
    padding-top: 150px;
    height: 2400px;
    background: red;
  }
  .headerFlex{
    position:fixed;
  }
}
</style>