Question

我很长时间难以找到解决问题的方法。

让我们开始。

我有一个简单的单页网站，我尝试用VUE JS和NUXT JS构建静态网站渲染。该网站具有带导航的粘性标题，以及页眉和页脚中的相同导航。重点是滚动到不同的断点时更改活动路线。如何尽快改变动态路径的路径屏幕顶部交叉，例如div，id =“about”??

请建议盯着NUXT.js的最佳解决方案

Answer 1

data() {
    return {
      link: 'https://example.com'
    }
  },
  methods: {
    handleScroll() {
      let scrollAmount = document.documentElement.scrollTop
      if(scrollAmount >= YourElement offsetTop) {
        this.link = 'https://expmaple-2.com'
      }
    }
  },
  created() {
    if (process.client) {
      window.addEventListener('scroll', this.handleScroll)
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener('scroll', this.handleScroll);
    }
  }

您需要获取断点值并插入它们而不是YourElement offsetTop。例如，您可以通过$refs执行此操作。然后将链接绑定到:href="link"等导航项。您还可以使用多个断点，只需根据需要修改handleScroll方法。希望它会有所帮助。

在NUXT JS中丰富断点时动态更改路由

1 个答案: