Templates for Joomla! 5.x • Re: scrollspy in astroid

I tried several solutions but without result,
Here is below the JS code I entered



document.addEventListener('DOMContentLoaded', function () {
const header = document.querySelector('header');
const sections = document.querySelectorAll('section[id^="section"]');
const navLinks = document.querySelectorAll('#navbar-example .nav-link');

// Vérifiez si le header existe
if (!header) {
console.error('Header introuvable ! Assurez-vous qu\'il existe.');
return;
}

// Calculez la hauteur du header
const headerHeight = header.offsetHeight;
console.log('Hauteur du header :', headerHeight);

// Configurez l'Intersection Observer
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const id = entry.target.id;

// Activez le lien correspondant
navLinks.forEach((link) => {
link.classList.toggle('active', link.getAttribute('href').slice(1) === id);
});

console.log('Section visible :', id);
}
});
},
{
root: null, // Utilise la fenêtre comme conteneur
rootMargin: `-${headerHeight}px 0px 0px 0px`, // Décalage basé sur le header
threshold: 0.1 // Active quand 10% de la section est visible
}
);

console.log('Valeur de rootMargin :', `-${headerHeight}px 0px 0px 0px`);

// Observez chaque section
sections.forEach((section) => {
console.log('Observation de la section :', section.id);
observer.observe(section);
});

// Gestion des clics pour ajuster le scroll avec offset
navLinks.forEach((link) => {
link.addEventListener('click', function (event) {
event.preventDefault(); // Empêche le comportement par défaut du clic

const targetId = this.getAttribute('href').slice(1);
const targetElement = document.getElementById(targetId);

// Scroll avec offset pour tenir compte du header
const targetPosition = targetElement.offsetTop - headerHeight;

window.scrollTo({
top: targetPosition,
behavior: 'smooth' // Ajoute un défilement fluide
});
});
});
});

Console Result

Hauteur du header : 88
Valeur de rootMargin : -88px 0px 0px 0px
Observation de la section : section1
Observation de la section : section2
Observation de la section : section3
Section visible : section1
Section visible : section2
Section visible : section3

I'm not very familiar with JS
Can you help me please

Thanks

Statistics: Posted by tigris13150 — Mon Nov 25, 2024 5:05 pm

---