vue.js粘滞导航条只执行一次并有错误: scrollTop总是0

Question

全。我试着做粘条，但有问题：

如果按下面的方式编写，则

1. ，navBaroffsetTop始终为0，而函数fixNavBar()在加载页面时只执行一次。

​

HTML：

html内容

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()
  }

1. 我把window.onload()放在mounted生命周期中的原因是，我把它放入了function 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;