我有一个网站，我想要它，以便在您滚动屏幕顶部或屏幕上第一个页面的div或网站部分时，添加一个带有框阴影等的类。您可以通过在下面运行我的代码段来查看，我已经成功使其单击后滚动到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>
答案 0 :(得分：1)
在 jQuery 下面，您可以在到达顶部时滚动激活类
$(document).ready(function() {
$(window).scroll(function(){
var topMenuHeight = $('.header').outerHeight() + 30;
var fromTop = $(this).scrollTop() + topMenuHeight;
$('.content').each(function() {
if ($(this).offset().top < fromTop){
var id = $(this).attr('id');
$('.content').removeClass('active');
$('#'+ id).addClass('active');
}
else{
var id = $(this).attr('id');
$('#'+ id).removeClass('active');
}
});
});
$("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>
答案 1 :(得分：1)
尝试一下。
Recursive call on: 2 3 4 1 2 4 3 5 6 2 2 2 1 1 1
Placed 1 at it's correct position
Recursive call on: 2 4 3 5 6 2 2 2 3 4 2
Placed 2 at it's correct position
Recursive call on: 4 3 5 3 4 6
Placed 6 at it's correct position
Recursive call on: 4 3 5 3 4
Placed 4 at it's correct position
Recursive call on: 3 3
Placed 3 at it's correct position
Recursive call on: 5
Placed 5 at it's correct position
Sorted array: 1 1 1 1 2 2 2 2 2 3 3 4 4 5 6
$(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");
});
var start = $('.content').first();
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if($(this).scrollTop()>= start.position().top){
updateClass();
start = start.next();
}
} else {
if($(this).scrollTop()<= start.position().top){
updateClass();
start = start.prev();
}
}
lastScrollTop = st;
});
function updateClass(){
$(".content").removeClass("active");
start.addClass("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>