Efek ScrollSpy adalah teknik yang secara otomatis menyorot link navigasi saat pengguna menggulir ke bagian (section) tertentu dari halaman. Dengan scrollspyy-js, Anda dapat membuat navigasi interaktif tanpa harus menulis logika JavaScript yang rumit.

BACA JUGA: Cara Membuat Efek Parallax Mudah dengan parallaxx.js

1. Cara Menggunakan (CDN)

Anda bisa menyertakan library langsung melalui jsDelivr atau unpkg:

Opsi 1: jsDelivr

<script src="https://cdn.jsdelivr.net/npm/scrollspyy-js@latest/dist/scrollspy.js"></script>

Opsi 2: unpkg

<script src="https://unpkg.com/scrollspyy-js@latest/dist/scrollspy.js"></script>

2. Inisialisasi ScrollSpy

Tambahkan script berikut setelah memuat file scrollspy.js:

<script>
  scrollSpy.init({});
</script>

Anda bisa menambahkan konfigurasi di dalam {} untuk mengubah tampilan & perilaku.

3. Contoh Dasar (Quick Start)

index.html :

<!DOCTYPE html>
<html>
<head>
  <title>ScrollSpy Example</title>
  <style>
    /* Navigasi tetap */
    nav {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    nav a {
      display: block;
      padding: 0.5rem 1rem;
      text-decoration: none;
      color: #333;
      margin-bottom: 0.5rem;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    /* Konten */
    section {
      min-height: 100vh;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#home" class="nav-link">Home</a>
    <a href="#about" class="nav-link">About</a>
    <a href="#services" class="nav-link">Services</a>
    <a href="#contact" class="nav-link">Contact</a>
  </nav>

  <section id="home" style="background: #e3f2fd;">
    <h1>Home Section</h1>
  </section>
  
  <section id="about" style="background: #f3e5f5;">
    <h1>About Section</h1>
  </section>
  
  <section id="services" style="background: #e8f5e9;">
    <h1>Services Section</h1>
  </section>
  
  <section id="contact" style="background: #fff3e0;">
    <h1>Contact Section</h1>
  </section>

  <!-- Library -->
  <script src="https://cdn.jsdelivr.net/npm/scrollspyy-js@latest/dist/scrollspy.js"></script>

<script src="script.js"></script>
</body>
</html>

scritpt.js atau tab javascript (jika pakai kode editor online)

  // Inisialisasi dasar
    scrollSpy.init({});

Catatan Penting:

Semua link navigasi harus pakai class .nav-link.
- Karena secara default, library mencari elemen dengan selector .nav-link.
- Jika link tidak diberi class ini, maka tidak akan dikenali sebagai bagian dari ScrollSpy.
- Contoh benar:
```
<a href="#about" class="nav-link">About</a>
```
href di navbar harus sama persis dengan id di section target.
- ScrollSpy bekerja dengan mencocokkan nilai href pada link dengan id pada section.
- Jika berbeda, link tidak akan aktif saat section tersebut discroll.
- Contoh benar:
```
<a href="#services" class="nav-link">Services</a>
<section id="services">...</section>
```
- Contoh salah (tidak akan aktif):
```
<a href="#services" class="nav-link">Services</a>
<section id="layanan">...</section>
```
Default target section adalah <section>. Kalau mau pakai tag lain, atur sectionSelector.

Secara bawaan, ScrollSpy hanya melacak elemen <section>.
Jadi, setiap id di navbar sebaiknya diarahkan ke tag <section>.
Jika ingin menggunakan elemen lain seperti <div>, perlu menyesuaikan pengaturan saat inisialisasi:
```
scrollSpy.init({
  sectionSelector: "div" // ganti target dari <section> ke <div>
});
```

4. Opsi Konfigurasi

Anda bisa menyesuaikan tampilan & perilaku dengan parameter berikut di scrollSpy.init():

Parameter	Tipe	Default	Deskripsi
`sectionSelector`	String	`"section"`	Selector untuk section yang dilacak. Wajib punya `id`.
`navSelector`	String	`".nav-link"`	Selector untuk link navigasi. `href` harus mengarah ke `id` section.
`padding`	Number	`5`	Padding (px) untuk link aktif.
`borderRadius`	String	`"5px"`	Radius border untuk link aktif.
`offset`	Number	`150`	Offset scroll (px) sebelum link dianggap aktif. Cocok untuk header fixed.
`activeClass`	String	`"active-scrollspy"`	Class CSS yang ditambahkan pada link aktif.
`bgColor`	String	`""`	Warna background link aktif.
`textColor`	String	`"#59110cff"`	Warna teks link aktif.
`fontWeight`	String	`"bolder"`	Ketebalan font link aktif.
`underline`	Boolean	`false`	Aktifkan underline untuk link aktif.
`underlineColor`	String	`"blue"`	Warna underline.
`underlineOffset`	String	`"2px"`	Jarak underline dari teks.

5. Contoh Lanjutan

Custom Navigation

scrollSpy.init({
  sectionSelector: ".content-section",
  navSelector: ".sidebar-nav a",
  padding: 10,
  borderRadius: "25px",
  offset: 100,
  bgColor: "#c4f622ff",
  textColor: "#ffffff",
  fontWeight: "600",
  underline: false
});

Minimal Configuration

scrollSpy.init({
  bgColor: "#007bff",
  textColor: "#fff"
});

Dengan Underline

scrollSpy.init({
  bgColor: "transparent",
  textColor: "#e91e63",
  fontWeight: "bold",
  underline: true,
  underlineColor: "#e91e63",
  underlineOffset: "4px"
});

Untuk Fixed Header (misalnya tinggi 80px)

scrollSpy.init({
  offset: 80,
  bgColor: "#28a745",
  textColor: "#fff",
  borderRadius: "0px"
});

Troubleshooting

Style tidak terapkan?
Library menggunakan !important untuk override, pastikan tidak ada konflik CSS lain.
Error di console?
Periksa apakah script dipanggil setelah elemen nav & section dimuat.
Navigasi tidak aktif?
Pastikan href di link sama dengan id pada section (contoh: href="#about" → <section id="about">).

Contoh Kode Lengkap

Full kode bisa cek disini

#Desain Web

Cara Membuat Animasi Scrollspy dengan Library Scrollspy-js