【发布时间】：2019-02-25 03:27:50
【问题描述】：
我有一个网站，我想要它，这样，当您滚动屏幕顶部的 div 或网站部分时，或者首先在屏幕上滚动时，会添加一个类，带有框阴影等。如您可以通过运行下面的代码 sn-p 看到，我已成功使其在单击时滚动到 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>【问题讨论】：
标签： javascript jquery html scroll