如何使用 Tailwind 和 Nuxt.js 突出显示导航栏上的活动部分？

Posted 2023-03-07

【中文标题】如何使用 Tailwind 和 Nuxt.js 突出显示导航栏上的活动部分？

【英文标题】：How to highlight an active section on the navbar using Tailwind with Nuxt.js?

【发布时间】：2021-02-20 04:53:42

【问题描述】：

我有一个包含不同 id 部分和导航栏的单页网站。当用户在各个部分滚动页面时，我想更改导航栏上突出显示的链接。这是我的代码的样子。

<!-- components/Navbar.vue -->

<template>
  <nav class="fixed w-full px-6 py-4 bg-white">
    <div class="flex items-center justify-between">

      <div>
        <img  src="@/assets/logo.svg">
      </div>

      <ul class="flex space-x-8 text-sm text-white font-sans">
        <li><a href="#home" class="active border-b-2 border-red-500 pb-1">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>

    </div>
  </nav>
</template>

<!-- layouts/default.vue -->

<template>
  <div>
    <Navbar />
    <Nuxt />
  </div>
</template>

<!-- pages/index.vue -->

<template>
  <div>
    <Home />
    <Services />
    <Features />
    <Faq />
    <Contact />
  </div>
</template>

<!-- components/Home.vue -->

<template>
  <section id="home">
    <div class="w-full h-screen bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1533174072545">
      <div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
        <div class="text-center">
          <h1 class="text-blue-400 text-5xl font-black">My website</h1>
          <p class="text-white font-bold">What an awesome website</p>
        </div>
      </div>
    </div>
  </section>
</template>

每个组件（Home、Services、Features、Faq 和 Contact）都有一个 <section>，其 id 如上例所示。

感谢您的帮助:)

【问题讨论】：

我建议使用 javascript 库来检测滚动部分。像 Scrollama 或 GSAP's scrolltrigger 这样的库可用于执行此操作。在这些插件中，您可以设置触发元素/类/属性。当您滚动经过这些元素之一时，您可以触发一个事件。

【参考方案1】：

我终于找到了一个可以让我做我想做的事的依赖！

依赖是vue2-scrollspy。 Nuxt.js 没有正式支持它，但它工作得很好。以下是如何配置它：

//plugins/vue2-scrollspy.js

import Vue from "vue";
import Scrollspy,  Easing  from "vue2-scrollspy";
Vue.use(Scrollspy,  easing: Easing.Cubic.InOut );

//nuxt.config.js

export default 
  plugins: [
     src: "~/plugins/vue2-scrollspy", s-s-r: false 
  ],

享受吧！