https://nio.gov.pl/layout/nio/assets/js/modules/sticky-submenu.js

1/*
2 * sticky-submenu.js - Moduł obsługujący przylepne podmenu
3 */
4
5/**
6 * Inicjalizuje przylepne submenu, które pozostaje widoczne podczas przewijania
7 */
8export function initStickySubmenu() {
9  const submenu = document.getElementById("submenu-1");
10  
11  if(!submenu || !submenu.length)
12    return;
13  
14  const sidebar = document.querySelector(".sidebar-menu"); // Rodzic menu
15  const placeholder = document.createElement("div"); // Placeholder zajmujący miejsce submenu
16  const links = submenu.querySelectorAll("a");
17  const sections = links.length ? Array.from(links).map(link => document.querySelector(link.getAttribute("href"))) : [];
18    
19  placeholder.style.height = (submenu.offsetHeight + 20) + "px";
20  placeholder.classList.add("submenu-placeholder");
21  
22  submenu.parentNode.insertBefore(placeholder, submenu); // Dodanie placeholdera przed submenu
23
24  const offsetTop = submenu.getBoundingClientRect().top + window.scrollY; // Pozycja początkowa submenu
25
26  // Obsługa zdarzenia przewijania
27  window.addEventListener("scroll", function() {
28    if (window.scrollY >= offsetTop) {
29      submenu.classList.add("sticky-submenu");
30      placeholder.style.display = "block"; // Pokazanie placeholdera
31    } else {
32      submenu.classList.remove("sticky-submenu");
33      placeholder.style.display = "none"; // Ukrycie placeholdera
34    }
35    
36    // Podświetlanie aktywnej sekcji w submenu
37    let currentSection = sections.find(section => section && section.getBoundingClientRect().top <= 100);
38    if (currentSection) {
39      links.forEach(link => link.classList.remove("active"));
40      let activeLink = submenu.querySelector(`a[href="#${currentSection.id}"]`);
41      if (activeLink) activeLink.classList.add("active");
42    }
43  });
44
45  // Dostosowanie szerokości submenu przy zmianie rozmiaru okna
46  window.addEventListener("resize", function() {
47    submenu.style.width = sidebar.clientWidth + "px";
48  });
49}