https://www.holman.com/wp-content/themes/holman/src/scripts/block/quick-link-menu.js

1const quickLinkMenu = document.querySelector(".quick-link-menu");
2const quickLinkMenuTop = quickLinkMenu.offsetTop;
3const quickLinkMenuHeight = quickLinkMenu.scrollHeight;
4const sections = document.getElementsByTagName("section");
5const quickLinkMenuItems = quickLinkMenu.querySelectorAll(".menu-item");
6const quickLinkMenuContainer = document.querySelector(".quick-link-container");
7let scrollPadding = 70;
8if(window.innerWidth <= 992) {
9    scrollPadding = 30;
10}
11
12if (quickLinkMenuContainer.scrollWidth > quickLinkMenuContainer.clientWidth) {
13    quickLinkMenuContainer.style.justifyContent = "flex-start";
14    quickLinkMenuContainer.classList.add("overflow");
15    let mouseDown = false;
16    let startX, scrollLeft;
17
18    const dragging = (e) => {
19        mouseDown = true;
20        startX = e.pageX - quickLinkMenuContainer.offsetLeft;
21        scrollLeft = quickLinkMenuContainer.scrollLeft;
22    };
23
24    const stopDragging = () => {
25        mouseDown = false;
26    };
27
28    quickLinkMenuContainer.addEventListener("mousemove", (e) => {
29        e.preventDefault();
30        if (!mouseDown) {
31            return;
32        }
33        const x = e.pageX - quickLinkMenuContainer.offsetLeft;
34        const scroll = x - startX;
35        quickLinkMenuContainer.scrollLeft = scrollLeft - scroll;
36    });
37    quickLinkMenuContainer.addEventListener("mousedown", dragging, false);
38    quickLinkMenuContainer.addEventListener("mouseup", stopDragging, false);
39    quickLinkMenuContainer.addEventListener("mouseleave", stopDragging, false);
40}
41
42function onQuickLinkMenuClick(targetID) {
43    const target = document.querySelector(`#${targetID}`);
44    const position = target.offsetTop - (quickLinkMenuHeight + scrollPadding);
45    window.scroll({ top: position, behavior: "smooth" });
46}
47
48window.onscroll = function () {
49    if (window.pageYOffset >= quickLinkMenuTop) {
50        quickLinkMenu.classList.add("header-fix-top");
51    } else {
52        quickLinkMenu.classList.remove("header-fix-top");
53    }
54
55    for (let i = 0; i < quickLinkMenuItems.length; i++) {
56        const item = quickLinkMenuItems[i];
57        const itemScrollTo = item.getAttribute("scroll-to");
58        const menuItem = item.querySelector(".menu-link");
59        const scrollToItem = document.querySelector(`#${itemScrollTo}`);
60        const scrollToItemTop = scrollToItem.offsetTop;
61        const scrollToItemHeight = scrollToItem.offsetHeight;
62
63        if (window.pageYOffset >= scrollToItemTop - quickLinkMenuHeight - scrollPadding) {
64            //if scroll to div
65            menuItem.classList.add("active");
66            if (i > 0) {
67                const prevItem =
68                    quickLinkMenuItems[i - 1].querySelector(".menu-link");
69                prevItem.classList.contains("active") &&
70                    prevItem.classList.remove("active");
71            }
72        } else {
73            // if scroll above the div
74            menuItem.classList.remove("active");
75        }
76        if (
77            window.pageYOffset >
78            scrollToItemTop + scrollToItemHeight - quickLinkMenuHeight
79        ) {
80            //if scroll past the div
81            menuItem.classList.remove("active");
82        }
83    }
84};