How to change the opacity from overlaying sticky elements?

I'm new to coding, especially JavaScript, and ran into a problem that I just can't solve. I have a few elements (a,b,c,d,e,f,g) on the right side of my website. They are sticky and all stop at the same position. Just like I want them to.

However, when they overlay each other I want the element below to change its opacity to 0. Therefore I'm using JavaScript but my code isn't working at all.

I embedded my JavaScript-code into my html document using <script type="text/javascript"> </script>.

Does anyone know how I can fix the issue?

Thanks for your help!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.addEventListener('DOMContentLoaded', function() {
var stickyElements = Array.from(document.getElementsByClassName('float'));
function toggleStickyElements() {
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
stickyElements.forEach(function(element, index) {
var nextElement = stickyElements[index + 1];
var currentMarginTop = element.offsetTop;
var nextMarginTop = nextElement ? nextElement.offsetTop : Infinity;
if (scrollPosition >= currentMarginTop && scrollPosition < nextMarginTop) {
element.classList.add('hidden');
} else {
element.classList.remove('hidden');
}
});
}
window.addEventListener('scroll', toggleStickyElements);
toggleStickyElements(); // Initial check on page load
});

<!-- language: lang-css -->

.float {
float: right;
margin-top: calc(100vw / 7.51);
margin-right: calc(100vw / 19.8);
font-family: classic_roman_stdlight;
font-size: calc(100vw / 25);
color: hsl(228, 89%, 93%);
opacity: 1;
z-index: -6;
}
.hidden {
display: none;
}
#alpha {
position: sticky;
top: calc(100vw / 7.51);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}
#beta {
margin-top: calc(100vw / 1.72);
position: sticky;
top: calc(100vw / 7.3);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}
#gamma {
margin-top: calc(100vw / 1.72);
position: sticky;
top: calc(100vw / 7.3);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}
#delta {
margin-top: calc(100vw / 1.72);
position: sticky;
top: calc(100vw / 7.3);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}
#epsilon {
margin-top: calc(100vw / 1.72);
position: sticky;
top: calc(100vw / 7.3);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}
#zeta {
margin-top: calc(100vw / 1.72);
position: sticky;
top: calc(100vw / 7.3);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}
#eta {
margin-top: calc(100vw / 1.72);
position: sticky;
top: calc(100vw / 7.3);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
}
#A {
margin-top: calc(100vw / 1.72);
position: sticky;
top: calc(100vw / 7.3);
color: white;
}

<!-- language: lang-html -->

<section>
<title>Sticky Elements Example</title>
<ol class="float">
<li id="alpha"> α </li>
<li id="beta"> β </li>
<li id="gamma"> γ </li>
<li id="delta"> δ </li>
<li id="epsilon"> ε </li>
<li id="zeta"> ζ </li>
<li id="eta"> η </li>
<li id="A"> b </li>
</ol>
</section>

<!-- end snippet -->

It seems like your code is not working because you're trying to hide the entire list, not individual list items. In your JavaScript, you are creating an array of elements with the class 'float', but there is only one element with this class: the entire ordered list (ol). Therefore, you're trying to hide the entire list instead of each list item individually.