在 VueJS3 中向下滚动时如何用搜索 div 替换导航栏？

Question

我是vuejs的新手，当searchdiv向下滚动时到达屏幕顶部时，我试图让我的search component替换我的fixed-top导航栏，当我向上滚动时，导航栏只会在用户打开时出现最佳。 我见过像谷歌搜索这样的功能。 请参阅：

这是正常的视图：

这是滚动视图：

这是我的：

这是我的代码：

  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  mounted() {
    console.log("HomeLandingComponent mounted");
  },
  methods: {

    handleScroll() {
      let scrollY = window.scrollY
      if (scrollY > this.startY) {
        this.navbar_visible = false;
      } else {
        this.navbar_visible = true;
      }
      this.startY = scrollY;
    }
  }

所做的只是在向下滚动时隐藏导航栏并在向上滚动时显示导航栏。 有没有办法实现它？

Answer 1

简单的。 确保搜索栏在导航栏之后，并且搜索栏没有嵌套； 然后在搜索栏上，固定 position； z-索引：1； 你可以使用 JavaScript 添加一个新的 class 给背景一个新的颜色。 应该不会太难。 一旦我在我的电脑上，我就会写代码。