Apa yang anda cari?

<style>
.site-header {
  position: fixed; /* supaya header tetap di atas saat scroll */
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 999;
}
.ast-builder-menu-1 .menu-item > .menu-link.active{
    color:var(--ast-global-color-1)
}
.site-header.scrolled {
  background:rgba(0, 0, 0, 0.8); /* ganti sesuai warna yang diinginkan */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.ast-primary-header-bar {
    background-color: transparent;
    border: 0;
}
/* Default (awal, background transparan, teks putih) */
.ast-site-identity .site-title a,
.ast-builder-menu-1 .menu-item > .menu-link {
  color: #fafafa;
  transition: color 0.3s ease;
}

/* Saat discroll (header sudah putih, teks jadi hitam) */
.site-header.scrolled .ast-site-identity .site-title a,
.site-header.scrolled .ast-builder-menu-1 .menu-item > .menu-link {
  /*color: #000;  bisa ganti ke warna lain */
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const header = document.querySelector(".site-header");

  window.addEventListener("scroll", function () {
    if (window.scrollY > 70) { 
      header.classList.add("scrolled");
    } else {
      header.classList.remove("scrolled");
    }
  });
});

// Fungsi untuk smooth scroll
function smoothScroll(targetId) {
  const targetElement = document.querySelector(targetId);
  if (targetElement) {
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    const duration = 1000; // Durasi animasi dalam milidetik
    let startTime = null;

    function animation(currentTime) {
      if (startTime === null) startTime = currentTime;
      const timeElapsed = currentTime - startTime;
      const run = ease(timeElapsed, startPosition, distance, duration);
      window.scrollTo(0, run);
      if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    // Fungsi easing untuk animasi yang lebih natural
    function ease(t, b, c, d) {
      t /= d / 2;
      if (t < 1) return c / 2 * t * t + b;
      t--;
      return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
  }
}

// Menambahkan event listener untuk semua link hash
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');

    // Update active class
    document.querySelectorAll('nav a').forEach(navLink => {
      navLink.classList.remove('active');
    });
    this.classList.add('active');

    smoothScroll(targetId);
  });
});

// Fungsi untuk update active nav berdasarkan scroll position
function updateActiveNav() {
  const sections = document.querySelectorAll('div');
  const navLinks = document.querySelectorAll('nav a');

  let currentSection = '';

  sections.forEach(section => {
    const sectionTop = section.offsetTop - 100;
    const sectionHeight = section.clientHeight;
    if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
      currentSection = '#' + section.getAttribute('id');
    }
  });

  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === currentSection) {
      link.classList.add('active');
    }
  });
}

// Event listener untuk scroll
window.addEventListener('scroll', updateActiveNav);

// Panggil sekali saat halaman dimuat untuk set active section awal
updateActiveNav();
</script>