2021-07-08

1.Vue文件中编写

<template>
  <div class="first" @scroll.passive="getScroll($event)">
    <div >
      <div v-for="item in 30" style="background:black;color:#fff;">
      {{item}}
      </div>
    </div>
    <div id="first" style="background:red;color:#fff;height:300px">
    </div>
    <div v-for="item in 200" style="background:black;color:#fff;">
    {{item}}
    </div>
  </div>

</template>

2.methods中声明方法

getScroll(e) {
      var currTop = e.target.scrollTop;
      // console.log("00000000000",currTop);
      //480为被固定区域上方高度
      if (currTop >= 480) { //判断小于则为向上滚动
          $('#first').attr('style','top:0px; position: fixed;background:red;color:#fff;height:300px;width:100px;');
      }else{
          $('#first').attr('style','background:red;color:#fff;height:300px;width:100px;');
      }
    },

3.css

<style lang='stylus' scoped>
.first
  background blue
  color #fff
  width 500px
  height 900px
  overflow scroll

</style>

效果图如下图所示：