Using elements multiple times

[mmorkt]

Really nice framework thanks! I've got one problem. I want to change a class on another element when data-sal is fired, they are not related to the data-sal objects. At the same time I want to use the features that sal.js provides.

So its fired once but not the second time:

HTML:

<nav id="nav" class="p-4 w-full fixed nav" Nav</nav>

<div data-sal class="whiteMenu bg-gray-300 h-screen">ds</div>
<div class=" bg-gray-500 h-screen">ds</div>
<div class=" bg-gray-500 h-screen">ds</div>
<div data-sal class="whiteMenu bg-gray-300 h-screen">ds</div>
<div class=" bg-gray-500 h-screen">ds</div>
<div class=" bg-gray-500 h-screen">ds</div>
<div data-sal class="whiteMenu bg-gray-300 h-screen">ds</div>

The script tag:

  sal({
    threshold: 0.01,
    once: false
  });

  const whiteMenu = document.querySelector('.whiteMenu');
  var nav = document.getElementById("nav");

  whiteMenu.addEventListener('sal:in', ({ detail }) => {
    alert('white');
    someOtherStuff();
  });

  whiteMenu.addEventListener('sal:out', ({ detail }) => {
    alert('black');
    someOtherStuff();
  });

[mciastek]

I want to change a class on another element when data-sal is fired, they are not related to the data-sal objects.

Does this other element class change results in layout shift? If so, the Intersection Observer may incorrectly detect object in viewport. Additionally,threshold seems to be rather unusually small. Why is that?

Thank you for providing pseudo code, but in this case a working example would be more helpful. Could create such example using any online dev environment?