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');
    }
  });
}