Navigasi Terasa Kaku? Ini Cara Pasang Floating Navigation Dots Bar di Elementor!

<!-- LUXEE FLOATING NAV DOTS -->
<div id="luxee-nav-dots" class="luxee-dots-container">
  <a href="#hero" class="luxee-dot active" data-tooltip="Sampul"><span></span></a>
  <a href="#about" class="luxee-dot" data-tooltip="Tentang Acara"><span></span></a>
  <a href="#rundown" class="luxee-dot" data-tooltip="Rundown"><span></span></a>
  <a href="#lokasi" class="luxee-dot" data-tooltip="Lokasi"><span></span></a>
  <a href="#rsvp" class="luxee-dot" data-tooltip="RSVP / Daftar"><span></span></a>
</div>

<style>
.luxee-dots-container {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.luxee-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgba(194, 155, 100, 0.6);
  display: block;
  transition: all 0.3s ease;
  position: relative;
}
.luxee-dot:hover, .luxee-dot.active {
  background: #C29B64;
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(194, 155, 100, 0.8);
}
@media (max-width: 600px) {
  .luxee-dots-container {
    right: 10px;
    gap: 8px;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const dots = document.querySelectorAll('.luxee-dot');
  const sections = Array.from(dots).map(dot => {
    const id = dot.getAttribute('href');
    return document.querySelector(id);
  });

  window.addEventListener('scroll', function() {
    let scrollPos = window.scrollY + 200;
    sections.forEach((sec, idx) => {
      if (sec) {
        let top = sec.offsetTop;
        let height = sec.offsetHeight;
        if (scrollPos >= top && scrollPos < top + height) {
          dots.forEach(d => d.classList.remove('active'));
          dots[idx].classList.add('active');
        }
      }
    });
  });
});
</script>