h5移动端上下布局

<template>
  <div class="home" id="home">
    <div class="header">头部</div>
    <div class="content">
      <div class="nav">导航</div>
      <div class="banner">banner</div>
      <div class="list-box">
        <div class="list-tab" :class="{'move':scrollTopMove}">list-tab</div>
        <ul>
          <li v-for="item in 100">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom-nav">底部</div>
  </div>
</template>

<script>


  export default {
    name   : 'Gift',
    data() {
      return {
        scrollTop:0
      }
    },
    mounted() {
      var last_known_scroll_position = 0;
      var ticking = false;
      let _this = this;

      function doSomething(scroll_pos) {
        console.log('scroll_pos',scroll_pos)
        _this.scrollTop = scroll_pos
      }

      window.addEventListener('scroll', (e)=> {
        last_known_scroll_position = window.scrollY;
        if (!ticking) {
          window.requestAnimationFrame(()=> {
            doSomething(last_known_scroll_position);
            ticking = false;
          });
        }
        ticking = true;
      });

    },
    computed: {
      scrollTopMove(){
        return this.scrollTop > 200
      }
    },
    methods: {
      scroll(e) {
        this.scrollTop = e.target.scrollTop
      }
    }
  }
</script>

<style lang="less">
  .home {
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    height: 100%;
    //overflow: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    .header {
      height: 50px;
      background: beige;
      font-size: 30px;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
    }

    .nav {
      height: 80px;
      background: green;
    }

    .content {
      width: 100%;
      height: 100%;
      background: #ccc;
    }

    .banner {
      height: 200px;
      background: #ea5e56;
    }

    .list-tab {
      width: 100%;
      height: 50px;
      text-align: center;
      background: fuchsia;
    }

    .move {
      position: fixed;
      top: 50px;
    }

    .bottom-nav {
      width: 100%;
      height: 50px;
      background: beige;
      font-size: 30px;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }
  }

</style>