vue.js粘性导航栏仅执行一次，但有错误：scrollTop始终为0

Question

全部。我试图做粘性条，但是有问题：

1. [如果我这样写，则navBaroffsetTop始终为0，而​​函数fixNavBar()仅在页面加载后执行一次。

HTML：

<template>
  <div class="navigators" :class="{ navBarFixed: isFixed }" ref="navigators">
   html content
  </div>
</template>

CSS：

.navBarFixed {
  position: fixed;
  top: 655px;
}

脚本：

 data() {
    return {
      isFixed: false
    };
  },
 methods: {
    fixNavBar: function(e) {
      let navBar = this.$refs.navigators;
      let navBaroffsetTop = navBar.offsetTop;
      let documentScrollTop = document.body.scrollTop;
      console.log(1);
      console.log(documentScrollTop);
      if (
        documentScrollTop >= navBaroffsetTop ||
        document.documentElement.scrollTop >= navBaroffsetTop
      ) {
        this.isFixed = true;
        }
    }
}

  mounted: function() {
    window.onscroll = this.fixNavBar()
  }

2. 我将window.onload()放入mounted生命周期的原因是，我将其放入功能fixNavBar()，但它仅以作弊方式起作用，并且当页面重新加载时它停止工作，我想这是因为当我在已安装的生命周期中调用函数fixNavBar()时，它只执行了一次。同时，它仍然具有

[navBaroffsetTop始终打印为0

还有错误

无法读取未定义的属性.offsetTop

在控制台中。

在这种情况下，代码如下：

fixNavBar: function (e) {
    let navBar = this.$refs.navigators;
    let navBaroffsetTop = navBar.offsetTop;
    let documentScrollTop = document.body.scrollTop;
    window.onscroll = function () {
        console.log(1);
        console.log(documentScrollTop);
        if (
            documentScrollTop >= navBaroffsetTop ||
            document.documentElement.scrollTop >= navBaroffsetTop
        ) {
            this.isFixed = true;
        }
    };
}

mounted: function() {this.fixNavBar();}

Answer 1

该函数将立即执行，因为您正在使用（）;对其进行调用]

只需您的代码即可：

window.onscroll = this.fixNavBar;