Блог

Главная - Вопросы по программированию - Как выделить активный раздел на панели навигации с помощью Tailwind с помощью Nuxt.js ?

Как выделить активный раздел на панели навигации с помощью Tailwind с помощью Nuxt.js ?

#nuxt.js #tailwind-css

#nuxt.js #tailwind-css

Вопрос:

У меня есть одностраничный веб-сайт с разными разделами идентификаторов и панелью навигации. Я хотел бы изменить выделенную ссылку на панели навигации, когда пользователь прокручивает страницу по разделам. Вот как выглядит мой код.

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

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

      <div>
        <img width="32px" 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 ) имеет a <section> со своим идентификатором, как показано в примере выше.

Спасибо за вашу помощь 🙂

Комментарии:

1. Я бы предложил использовать библиотеку JavaScript для обнаружения разделов прокрутки. Для этого можно использовать библиотеки, такие как Scrollama или scrolltrigger от GSAP. В этих плагинах вы можете установить триггерный элемент / класс / атрибут. Когда вы прокручиваете один из этих элементов, вы можете запустить событие.

Ответ №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", ssr: false }
  ],
}

Наслаждайтесь!