Currently, my function changes the color to black when the scroll number reaches 100. However, I am looking to target the JavaScript so that it changes the color to black when the scroll reaches a specific section designated by a p tag. My code is almost there, but I need help altering the if statement to pinpoint specific sections rather than relying on a number value?
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Function Practice</title>
</head>
<body>
<header>
<h1 class='test-title'>Testing title</h1>
</header>
<br>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni excepturi error facere sed quas repellat perferendis,
enim cumque, voluptatem mollitia porro consectetur dicta officiis itaque, quae adipisci accusamus quibusdam amet eligendi.
Ad delectus iure exercitationem accusamus ea nihil magni doloribus, inventore aut molestias repudiandae hic non in asperiores
dolor! Repellat blanditiis accusantium rem iure, molestias doloremque quidem. Facere nisi libero error aut hic tempora quidem
voluptate, omnis, nihil molestias, animi quia distinctio? Vel beatae, at dolore, laboriosam rem voluptatibus sunt illo obcaecati
modi iure sed odio voluptatum, numquam accusantium quibusdam tenetur velit aliquid! Ad animi sunt ratione suscipit totam tenetur
quia exercitationem excepturi doloribus vero nostrum, sapiente alias iste nam doloremque voluptatum consectetur reiciendis omnis
tempora? Esse quaerat molestias hic beatae ipsum, recusandae odio nobis sit quo in veniam aperiam, itaque facilis rerum eum.
Exercitationem architecto nulla dolor nemo eius neque ipsam omnis provident porro laborum eaque, totam quos. Obcaecati totam
doloribus recusandae aliquam quisquam consequuntur soluta impedit dolorum quam at? Aliquid, reiciendis. Eveniet, earum aliquid
sapiente quo voluptates velit nemo, distinctio architecto sint tenetur itaque! Dolore, sapiente debitis. Dolorum tempore, sunt
quam eos praesentium molestiae animi delectus architecto ipsa voluptate repudiandae odio error nulla. Nihil, accusamus aperiam!
Magni iure ea nulla veniam, provident quae ex nobis saepe veritatis dolor! Minus omnis totam quasi nam illum explicabo non ipsum
quibusdam iste sed facere officia, quia, minima sint debitis. Sequi consectetur assumenda tempore autem hic nihil alias! Illum natus
totam reiciendis adipisci voluptatibus nostrum! Ratione illo nulla provident, laborum quaerat voluptas.
</p>
<!-- CSS -->
<style>
/*CSS to set position of title*/
body {
min-height: 1400px;
}
p {
color: black;
margin-top: 700px;
}
.test-title {
position: fixed;
color: white;
background-color: darkblue;
margin-bottom: 100px;
transition: all 0.5s;
z-index: 100;
}
.test-title.active {
color: black;
transition: all 0.5s;
}
</style>
<!-- JavaScript -->
<script>
const titleEffect = document.querySelector('.test-title');
//scroll function
window.onscroll = function() {
let top = window.scrollY;
console.log(top);
if (top >= '100') {
titleEffect.classList.add('active');
} else {
titleEffect.classList.remove('active');
}
}
</script>
</body>
</html>