How to set class on div when user scrolling down

Question

I need to do one thing. I need to create a website and control the scrolling of the user and add classes accordingly to the elements on the page, such as here .. www.blogger.com. When the user scrolls down, the class "active" is added to the sections. Does anyone know of any instructions or anything to do so? Thank you very much, I am not very friendly with JavaScript, yet.

Answer 1

Somehow I managed something like that, but I don't know how well it's written, because I don't know much about JavaScript.

var sections = [
			"#mainPageSection-1",
			"#mainPageSection-2",
			"#mainPageSection-3"
		],
		sectionHeights = [
			$("#mainPageSection-1").outerHeight(),
			$("#mainPageSection-2").outerHeight(),
			$("#mainPageSection-3").outerHeight()
		],
		scrollBreakpoint = 0,
		i = 0;
		$(window).scroll(function() {
			totalView = $(window).height() + $(this).scrollTop();
			if((totalView > scrollBreakpoint) && (i < 3)){
				document.querySelector(sections[i]).classList.add("scrolled");
				scrollBreakpoint += (sectionHeights[i] + $(window).height()/5.5);
				i++;
			}
		});

.mainPageSection{
	height: 800px;
  color:white;
}

#mainPageSection-1{
  background-color: grey;
}

#mainPageSection-2{
  background-color: blue;
}

#mainPageSection-3{
  background-color: red;
}

.scrolled{
  color: black;
  transition: all .5s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="mainPageSection" id="mainPageSection-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p>
</section>
<section class="mainPageSection" id="mainPageSection-2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p>
</section>
<section class="mainPageSection" id="mainPageSection-3">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p>
</section>

Answer 2

you can use the "scroll" event, this is an example from w3schools

const scrollableEl = document.getElementById("scrollable-item")
let x = 0;

scrollableEl.addEventListener('scroll', function(e) {
  document.getElementById("demo").innerHTML = x += 1;
});

div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: scroll;
}

<p>Try the scrollbar in div.</p>

<div id="scrollable-item">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>

<p>Scrolled <span id="demo">0</span> times.</p>

Answer 3

You can contorlling scrolling through css class overflow . If in case you want to handle the scrolling in javascript then you can check window.scroll

check this link : https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll