I'm just starting out with JavaScript and I'm attempting to create a scrollable div that includes items from an array. As the user scrolls and each item reaches the top, I want a hidden element to be displayed.
Here's what I have so far:
var articles = document.getElementsByClassName("show-more");
var i = 0;
var breakpoint = 100;
Array.from(articles).forEach(v => v.addEventListener("scroll", function() {
var scrollDown = document.body.scrollTop;
if (scrollDown >= breakpoint) {
this.parentElement.getElementsByClassName('content')[0].classList.toggle('showdiv');
}
}.container {
width: 200px;
overflow: auto;
height: 300px !important;
background-color: salmon;
}
.content {
display: none;
height: 50px;
background-color: green;
position: absolute;
right: 100px;
}
.show-more {
height: 100px;
border-bottom: 1px solid blue;
}
.showdiv {
display: block !important;
}<div class="container">
<div>
<div class="content">content 1</div>
<div class="show-more">if this is on top, show content 1</div>
</div>
.... // additional HTML code
<div>
<div class="content">content 10</div>
<div class="show-more">if this is on top, show content 10</div>
</div>
</div>The concept is that once the user has scrolled 100px, the function will add a class to reveal the div.
I would greatly appreciate any assistance.
Thank you!