CMonday

I actually figured it out. I had to put both const inside of the function: window.addEventListener('scroll', checkSlide); checkSlide(); function checkSlide() { const slideBgs = document.querySelectorAll('.bg-one'); const triggerBottom = window.innerHeight / 2; slideBgs.forEach((bg) => { const bgTop = bg.getBoundingClientRect().top; if (bgTop < triggerBottom) { bg.classList.add('active'); } else { bg.classList.remove('active'); } }); }

Hi, I'm working on a website- I'm trying to added some simple Javascript to the homepage so that bar, (a div added to the page with a custom code block) will slide on scroll. I added the HTML in a code block on the page. The CSS in the Custom CSS and tried to add the Javascript in the Code Injection -> Header. It's not working, so I'm not sure what I'm missing. Is there a part of code I neglected, a functionality I missed? Anyone who can help, it'll be appreciated. Here is the Code: HTML There are three different sections with a code block added to it. <div class="bg-animation bg-one"></div> <div class="bg-animation-two bg-one"></div> <div class="bg-animation-three bg-one"></div> CSS section[data-section-id="65ee9337764cd0768aa99928"]{ position: relative; margin: 0px !important; padding: 0px !important; overflow: hidden; } ///Code Block /// #block-a956bc75086a2562bec9 { top: -180px; left: 40%; } .bg-one.active { transform:translateX(-10%); } .bg-animation.bg-one { background-image: linear-gradient(-50deg, #BDCDCD 50%, transparent 50%); width: 100vw !important; height: 1000px !important; position: absolute !important; left: -15%; padding: 0px; } ///What Is Section/// section[data-section-id="65ee9337764cd0768aa9992b"] { position: relative; margin: 0px !important; padding: 0px !important; overflow: hidden; } ///Code Block /// #block-yui_3_17_2_1_1716608494414_13985 { top: -60px; left: 25%; z-index: 0px; } .bg-animation-two.bg-one { background-image: linear-gradient(-115deg, #fff 50%, transparent 50%); position: absolute !important; width: 100vw !important; height: 1000px !important; left: -30%; margin-top: -160px; } ///Bottom Section/// section[data-section-id="664d66c47caf803146008b54"] { position: relative; margin: 0px !important; padding: 0px !important; overflow: hidden; } ///Code Block /// #block-yui_3_17_2_1_1716607856858_3799 { top: -60px; left: 25%; } .bg-animation-three.bg-one { background-image: linear-gradient(115deg, #fff 50%, transparent 50%); position: absolute !important; width: 100vw !important; height: 1000px !important; left: 10%; margin-top: -160px; } Javascript (wrapped in script tags) function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; const slideBgs = document.querySelectorAll('.bg-one'); window.addEventListener('scroll', checkSlide); checkSlide(); function checkSlide() { const triggerBottom = window.innerHeight; slideBgs.forEach((bg) => { const bgTop = bg.getBoundingClientRect().top; if (bgTop < triggerBottom) { bg.classList.add('active'); } else { bg.classList.remove('active'); } }); }