vue头部保持不动，尾部一直在最底部

需求：

想头部保持不动，当滚动条下拉到一定高度的时候，头部固定不动；当滚动条下拉小于一定高度的时候，头部恢复到正常的文档流里。

尾部一直在内容的最后面：当内容没有一屏的时候，尾部在最底部；当内容多的时候，尾部在内容的最后面。

实现方法：

1.使用动态class

<div class="g-header-container" :class="{'fixed': isFixed}">
      <c-header />
</div>
<div class="g-view-container" ref="scrollOne">
      <router-view></router-view>
</div>
<div class="g-footer-container">
      <c-footer />
</div>

(这里c-header和c-footer为自定义header和footer组件，给g-view-container加一个 ref 属性 为了下一步的调用$refs来获取它的距离上方的高度)

2.data()中定义一个默认值，并监听滚动条

data(){
      return {
          isFixed: false
      };
  },
  mounted () {
      window.addEventListener("scroll",this.handleScroll);
  },
  methods: {
      handleScroll() {
          //获取滚动时的高度
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
       
        let oneHeight = this.$refs.scrollOne.offsetTop;
        
        this.isFixed = scrollTop > oneHeight ? true : false;
        
        
       
      }
  }

3. 写样式，添加fixed布局

.g-header-container.fixed{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff;

    & ~ .g-view-container{
        margin-top: 2rem;
    }
    & ~ .g-footer-container{
        position: static;
    }
}

.g-footer-container{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

（~）后续兄弟选择器: 选择所有符合条件的兄弟元素

 

这样就达到了想要的效果！ O(∩_∩)O哈哈~