Sticky side nav

[VS_Online_Media]

Hi there,

I’m trying to make a sticky side navigation with X theme on the following page:

Stappenplan voor het maken van een pitch deck | Investor Ready

See picture below for the content that I’d like to be a navigation menu that has a fixed position when scrolling:

I made a column with content in it and I need it to remain fixed in position and not scroll up with the rest of page. I’d like to that the content in the right column with class: ‘.column-side-nav-kennisbank’ is a sticky side navigation that moves vertically when scrolling (like the menu navigation bar).

Some how I can’t get it to scroll down when scrolling down and scroll up when scrolling up.

For examples what I’m looking for are:

Statuten wijzigen? Dit is hoe het werkt | Firm24

[tristup]

Hi Floris,
Thanks for reaching out.

Regretfully, there is no such option available for sticky side menu in the X theme. To implement that, would require customization and which is beyond the scope of theme support.
I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where customization questions are answered.

Please remember that we don’t offer any support or investigation to any custom codes or issues related to it.

Thanks

[VS_Online_Media]

Oh I see… Can you maybe tell me if there any topics on the fora that has an answer to a problem similiar like mine? Or if you maybe know a plugin that can help me out?

On another page I tried adding a code for fixed scrolling that I found from a website: https://investorready.nl/kennisbanken/kennisbank/investeerders/10-belangrijke-redenen-waarom-investeerders-jou-propositie-kunnen-afwijzen/

I tried adding this code to JS on Cornerstone, but it doesn’t seem to work…After inspecting the console on Firefox I found this message: Uncaught TypeError: document.getElementsByClassName(…)[0] is undefined. Do you know how I can fix this and make this code work?

           const navbarHeight = document.getElementsByClassName("navbar")[0].clientHeight
          , offsetHeight = document.getElementsByClassName("f24-kennisbank-article-header")[0].clientHeight - navbarHeight;
        let stickyIndexElem = document.getElementsByClassName("sticky-index")[0];
        function buildSidenav() {
            generateKennisbankIndex(window.document.querySelector(".sticky-index > ul"), window.document.querySelector(".article-content"))
        }
        function generateKennisbankIndex(e, t) {
            let n = Array.from(t.querySelectorAll("H2:not(.no-sidenav)"));
            n.pop();
            let o = "";
            n.forEach(e=>{
                o += `<li><a href="#${e.id}">${e.textContent}</a></li>`
            }
            ),
            e.insertAdjacentHTML("beforeend", o),
            buildObserver()
        }
        function buildObserver() {
            const e = new IntersectionObserver(e=>{
                e.forEach(e=>{
                    const t = e.target.getAttribute("id")
                      , n = document.querySelector(`.sticky-index ul li a[href="#${t}"]`);
                    n && (e.intersectionRatio > 0 ? n.parentElement.classList.add("active") : n.parentElement.classList.remove("active"))
                }
                )
            }
            );
            document.querySelectorAll("H2[id]").forEach(t=>{
                e.observe(t)
            }
            )
        }
        function shouldStickySidebar() {
            window.scrollY >= offsetHeight ? stickyIndexElem.classList.add("fixed") : stickyIndexElem.classList.remove("fixed")
        }
        function shouldAutoScrollSidebarContents() {
            const e = document.getElementsByClassName("sticky-index")[0]
              , t = e.getElementsByClassName("active")[0];
            t && (t.offsetTop >= e.scrollTop + e.clientHeight ? e.scrollTo({
                left: 0,
                top: t.offsetTop,
                behavior: "smooth"
            }) : t.offsetTop <= e.scrollTop && e.scrollTo({
                left: 0,
                top: t.offsetTop,
                behavior: "smooth"
            }))
        }
        function drawProgressBar() {
            const e = document.getElementsByClassName("navbar")[0].clientHeight
              , t = document.getElementsByClassName("f24-kennisbank-article-header")[0].clientHeight
              , n = ((document.body.scrollTop || document.documentElement.scrollTop) - t) / (document.getElementsByClassName("kennisbank-article")[0].clientHeight + t - document.documentElement.clientHeight) * 100;
            window.scrollY > t - 10 ? (document.getElementById("f24-progress-container").classList.add("visible"),
            document.getElementById("f24-progress-container").style.top = `${e}px`) : (document.getElementById("f24-progress-container").classList.remove("visible"),
            document.getElementById("f24-progress-container").style.top = 0),
            document.getElementById("f24-progress-bar").style.width = n < 100 ? n + "%" : "100%"
        }
        setTimeout(buildSidenav, 50),
        setTimeout(()=>{
            window.addEventListener("scroll", shouldAutoScrollSidebarContents),
            window.addEventListener("scroll", shouldStickySidebar),
            window.addEventListener("scroll", drawProgressBar)
        }
        , 100);

A little bit of help would really help me out since I have no clue now what to do…

Thanks in advance,

Floris

[prakash_s]

Hello Floris,

Custom code investigation is beyond the scope of our theme support. If you are not familiar with the coding please consult a developer who can assist you with your concern.

Thanks