How to change css value of an element with Locomotive Scroll

Question

I'm looking for a soultion when a section is out of viewport, Locomotive scroll will change the css attributes on another element and when is in viewport, it reverts that back.

I couldn't find a soulution or a topic. basic knowledge of JS. So, appreaciate if someone can help me out to figure this out.

IT goldman · Answer 1 · 2022-09-03T18:48:20.197

This function from https://stackoverflow.com/a/57279138/3807365 is pretty simple to incorporate on scroll.

function isInView(el) {
  const box = el.getBoundingClientRect();
  return box.top < window.innerHeight && box.bottom >= 0;
}

Lets try

function isInView(el) {
  const box = el.getBoundingClientRect();
  return box.top < window.innerHeight && box.bottom >= 0;
}

var div1 = document.querySelector(".div1")
var div2 = document.querySelector(".div2")

window.onscroll = function() {

  if (isInView(div1)) {
    div2.classList.add("active");
  } else {
    div2.classList.remove("active");
  }

  if (isInView(div2)) {
    div1.classList.add("active");
  } else {
    div1.classList.remove("active");
  }


}

body {
  height: 1000px;
}

.div {
  width: 50px;
  height: 50px;
}

.div1 {
  margin-top: 100px;
  background: aqua;
  margin-bottom: 100px;
}

.div2 {
  background: magenta;
}

.active {
  border: 2px solid red;
}

<body>
  <div class="div div1"></div>
  <div class="div div2"></div>
</body>

Thanks but it didn't work with Locomotive Scroll! – MOH Sep 03 '22 at 19:53 — MOH, Sep 03 '22 at 19:53

How to change css value of an element with Locomotive Scroll

1 Answers1