vue監聽滾動條

　　首先，在mounted鈎子中給window添加一個滾動監聽事件，

mounted () {
  window.addEventListener('scroll', this.handleScroll)
},

　　然后在方法中，添加這個handleScroll方法，打印scrollTop在控制台中查看需要滾動的大小

handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  console.log(scrollTop)
},    

 　　添加內容，當滾動條滾動大於100時，top狀態改為1

 handleScroll() {
                        var scrollTop =
                                window.pageYOffset ||
                                document.documentElement.scrollTop ||
                                document.body.scrollTop;
                        console.log(scrollTop);
                        if (scrollTop > 100) {
                                this.top = 1;
                        } else {
                                this.top = 0;
                        }
                },　　

　　data return 中定義top初始值為0，

        data() {
                return {
                        top: 0,
                };
        },

　　需要顯示的內容上添加：

v-if="top == 1"

 

 

  參照： https://blog.csdn.net/qq_42221334/article/details/80969890?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.control      這里寫的是   實現某元素吸頂或者固定位置顯示