У меня есть веб-сайт, и я хочу, чтобы при прокрутке раздела или раздела веб-сайта в верхней части экрана или сначала на экране к нему добавлялся класс с тенью в виде рамки и т. Д.Вы можете увидеть, запустив мой фрагмент кода ниже, я успешно сделал прокрутку до div по щелчку и добавил класс, однако я хотел бы, чтобы он добавлял класс, когда пользователь прокручивает до div.Я хотел бы использовать JQuery и никаких внешних плагинов.
$(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>