I have a website and I want it so that, as you scroll the div or section of the website at the top of the screen, or first on screen, has a class added to it, with a box shadow etc. As you can see by running my code snippet below, I have successfully made it scroll to div on click, and add a class, however, I would like to have it add a class when user scrolls to div. I would like to use jQuery and no external plugins.
$(document).ready(function() {
$("nav ul li a").on('click', function() {
var Target = $(this).attr("anchor");
var Location = $("#" + Target).position();
$(".content").removeClass("active");
$("#" + Target).addClass("active");
$("html, body").animate({
scrollTop: Location.top - 30
}, 350);
});
$(".content").on("click", function() {
$(".content").removeClass("active");
$(this).addClass("active");
var Location = $(this).position();
$("html, body").animate({
scrollTop: Location.top - 30
}, 350);
});
$(window).click(function() {
$(".content").removeClass("active");
});
$('.content,nav ul li a').click(function(event) {
event.stopPropagation();
});
});body {
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
margin: 0;
padding-top: 3em;
font-size: 1rem;
}
.content {
background: black;
color: white;
border: none;
border-radius: 10px;
padding: 1em;
margin: 0 auto;
margin-top: 3em;
margin-bottom: 3em;
width: 80%;
}
.content p {
max-width: 900px;
}
@media (min-width: 700px) {
.header {
background: rgba(0, 0, 0, 0.75);
width: 80%;
text-align: center;
padding: 0.25em 5%;
position: fixed;
top: 0;
left: 5%;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
display: block;
z-index: 1;
-webkit-user-select: none;
user-select: none;
border: solid transparent 1px;
}
.header:hover {
background: rgba(0, 0, 0, 1);
}
nav ul {
list-style-type: none;
display: inline-block;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 1em;
font-weight: bold;
border-radius: 0.25em;
cursor: pointer;
}
nav ul li a:hover {
color: black;
background: white;
}
.content {
background: black;
color: white;
border: none;
border-radius: 10px;
padding: 1em;
margin: 0 auto;
margin-top: 3em;
margin-bottom: 3em;
width: 80%;
}
}
@media (max-width:700px) {
.header {
display: none;
}
.content {
background: black;
color: white;
border: none;
border-radius: 10px;
padding: 1em;
margin: 0 auto;
margin-top: 1em;
margin-bottom: 3em;
width: 80%;
}
}
.active {
background: #ddd;
color: black;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="header">
<nav>
<ul>
<li><a anchor="home">Home</a></li>
<li><a anchor="services">Services</a></li>
<li><a anchor="safety">Safety</a></li>
<li><a anchor="about">About Us</a></li>
<li><a anchor="contact">Contact</a></li>
</ul>
</nav>
</div>
<div id="home" class="content">
<h1>My Random Website</h1>
<p>Latin was originally spoken in the area around Rome, known as Latium.[4] Through the power of the Roman Republic, it became the dominant language, initially in Italy and subsequently throughout the western Roman Empire. Vulgar Latin developed into
the Romance languages, such as Italian, Portuguese, Spanish, French, and Romanian. Latin, Greek, and French have contributed many words to the English language. In particular, Latin (and Ancient Greek) roots are used in English descriptions of
theology, biology, science, medicine, and law.</p>
</div>
<div id="services" class="content">
<h1>Services</h1>
<p>Latin was originally spoken in the area around Rome, known as Latium.[4] Through the power of the Roman Republic, it became the dominant language, initially in Italy and subsequently throughout the western Roman Empire. Vulgar Latin developed into
the Romance languages, such as Italian, Portuguese, Spanish, French, and Romanian. Latin, Greek, and French have contributed many words to the English language. In particular, Latin (and Ancient Greek) roots are used in English descriptions of
theology, biology, science, medicine, and law.</p>
</div>
<div id="safety" class="content">
<h1>Safety</h1>
<p>Latin was originally spoken in the area around Rome, known as Latium.[4] Through the power of the Roman Republic, it became the dominant language, initially in Italy and subsequently throughout the western Roman Empire. Vulgar Latin developed into
the Romance languages, such as Italian, Portuguese, Spanish, French, and Romanian. Latin, Greek, and French have contributed many words to the English language. In particular, Latin (and Ancient Greek) roots are used in English descriptions of
theology, biology, science, medicine, and law.</p>
</div>
<div id="about" class="content">
<h1>About</h1>
<p>Latin was originally spoken in the area around Rome, known as Latium.[4] Through the power of the Roman Republic, it became the dominant language, initially in Italy and subsequently throughout the western Roman Empire. Vulgar Latin developed into
the Romance languages, such as Italian, Portuguese, Spanish, French, and Romanian. Latin, Greek, and French have contributed many words to the English language. In particular, Latin (and Ancient Greek) roots are used in English descriptions of
theology, biology, science, medicine, and law.</p>
</div>
<div id="contact" class="content">
<h1>Contact</h1>
Latin was originally spoken in the area around Rome, known as Latium.[4] Through the power of the Roman Republic, it became the dominant language, initially in Italy and subsequently throughout the western Roman Empire. Vulgar Latin developed into the
Romance languages, such as Italian, Portuguese, Spanish, French, and Romanian. Latin, Greek, and French have contributed many words to the English language. In particular, Latin (and Ancient Greek) roots are used in English descriptions of theology,
biology, science, medicine, and law.
</div>
</body>
</html>
