mam zrobione tak, że linki w navbarze podświetlają się (w zależności w jakiej jestem sekcji strony). chodzi o to, że, gdy strona się wczyta, link się nie podświetla. trzeba ręcznie przesunąć stronę o milimetr, dopiero wtedy href w navbarze się pogrubia. kod:
link
Podświetlanie elementu w spisie treści aktualnie widocznej sekcji
- Rejestracja: dni
- Ostatnio: dni
- Postów: 22
0
- Rejestracja: dni
- Ostatnio: dni
- Postów: 847
0
Możesz uruchomić tą funkcję po załadowaniu strony (w evencie DOMContentLoaded), albo skorzystać z takiego czegoś jak intersection observer
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- Rejestracja: dni
- Ostatnio: dni
- Postów: 22
0
niezbyt rozumiem i nie znam doma, mam jedynie podstawową wiedzę nt. js (ograniczającą się do ifów, forów, while'i i prostych funkcji), a sam skrypt wziąłem z internetu i przerobiłem, żeby pasował pod moją stronę. https://codepen.io/Web_Cifar/pen/LYRBbVE
- Rejestracja: dni
- Ostatnio: dni
- Postów: 847
0
Dobra, skoro nie znasz JavaScriptu to postaram się wytłumaczyć to w prosty sposób.
Musisz przenieść swoje obliczenia z eventu scroll do osobnej funkcji, tak żeby można było skorzystać z nich w innym miejscu, oraz upewnić się, że zostaną wykonane dopiero po załadowaniu strony.
// Owijamy całość w event DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("#navbarNav ul li");
// Przenosimy wszystkie obliczenia do osobnej funkcji
const setActiveLink = () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
}
// Po wczytaniu podstrony sprawdzamy w jakim miejscu znajduje się scrollbar
setActiveLink();
// Plus powtarzamy obliczenia przy każdym przesunięciu scrollbara
window.addEventListener("scroll", setActiveLink);
})