我在这个页面上工作：https://rdhs-stemposium.github.io/2017/
我使用scrollspy在页面的各个部分之间导航。通常，当您滚动到该部分时，该部分会在导航栏中显示活动外观，以指示您在该部分中。然而，有了这个页面，它似乎无法正常工作，我不确定为什么。
请帮忙！
编辑：这是代码：
<html>
<head>
<!--- This website code is property of the River Dell Regional High School !--->
<!--- Important --->
<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>River Dell STEMposium 2016 - River Dell High School's 5th Annual Science Symposium</title>
<!--- Bootstrap CSS and custom CSS --->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scaling.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<!--- Fonts (Rubik and Patua One, from Google Fonts) --->
<link href="https://fonts.googleapis.com/css?family=Patua+One|Rubik:400,500,700" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar">
<div id="top"></div>
<nav class="navbar navbar-default navbar-fixed-top animated fadeInDown">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-contents" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="#top">STEMposium 2017</a>
</div>
<div class="collapse navbar-collapse" id="nav-contents">
<div class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#speaker">Speaker</a></li>
<li><a href="#presentations">Presentations</a></li>
<li><a href="#contact">Contact</a></li>
</div>
</div>
</div>
</nav>
<section class="header" align="center">
<img class="header-logo" src="img/STEMposium17-logo-animated.gif">
</section>
<div class="container" id="about">
<section class="section-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe class="flexible" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3013.689769888508!2d-74.038378684919!3d40.944465879307266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2faa1360480df%3A0x875be3f4c98f864b!2s55+Pyle+St%2C+Oradell%2C+NJ+07649!5e0!3m2!1sen!2sus!4v1469213397652" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-md-6 col-content col-about">
<h2 class="about-headers">What</h2>
<p class="about-text">
River Dell STEMposium 2017
</p>
<h2 class="about-headers">When</h2>
<p class="about-text">
May 24, 2016
<br>
7:00 pm - 10:00 pm
</p>
<h2 class="about-headers">Where</h2>
<p class="about-text">
River Dell Regional High School
<br>
In the Cafeteria
</p>
</div>
</div>
</div>
<div class="container-fluid breaks">
<div class="row">
<div class="col-md-4 col-content col-title-sm-left">
<h2 class="about-headers">
<br>
<br>
The
<br>
Science
<br>
Research
<br>
Class
</h2>
</div>
<div class="col-md-8">
<img class="class-pic" src="http://placehold.it/775x450/">
</div>
</div>
</div>
<div class="container-fluid container-section-body">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum aliquet felis, a mollis tortor consectetur vitae. Nulla vestibulum velit nisl, ac mollis libero ornare et. Maecenas sed lacus non nibh suscipit elementum. Duis efficitur mi felis, scelerisque auctor ante gravida at. Integer in enim mattis, aliquam elit id, feugiat leo. Nullam vel eros magna. In porttitor risus nisi. Fusce efficitur viverra nulla nec fringilla. In id nisi est.
<br>
Ut id nunc vel urna placerat auctor. Phasellus rutrum, lacus sit amet semper posuere, arcu diam placerat ligula, non ultrices ante lorem a turpis. Sed pulvinar, est id interdum blandit, mi leo feugiat urna, id congue nisl ligula at lectus. Ut ac elit vel libero aliquet consequat. Integer et nisi lectus. Cras mattis efficitur risus auctor pharetra. Nulla commodo nulla et placerat varius. Nunc vulputate lectus et odio lacinia, sit amet auctor nisl tincidunt. Ut a nisl vitae sapien porta ultricies in pharetra sem. Nam a tellus vitae odio congue blandit ac eu ligula.
</p>
</div>
</section>
<section class="section-body" id="schedule">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe class="flexible" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3013.689769888508!2d-74.038378684919!3d40.944465879307266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2faa1360480df%3A0x875be3f4c98f864b!2s55+Pyle+St%2C+Oradell%2C+NJ+07649!5e0!3m2!1sen!2sus!4v1469213397652" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-md-6 col-content col-about">
<h2 class="about-headers">What</h2>
<p class="about-text">
River Dell STEMposium 2017
</p>
<h2 class="about-headers">When</h2>
<p class="about-text">
May 24, 2016
<br>
7:00 pm - 10:00 pm
</p>
<h2 class="about-headers">Where</h2>
<p class="about-text">
River Dell Regional High School
<br>
In the Cafeteria
</p>
</div>
</div>
</div>
<div class="container-fluid breaks">
<div class="row">
<div class="col-md-4 col-content col-title-sm-left">
<h2 class="about-headers">
<br>
<br>
The
<br>
Science
<br>
Research
<br>
Class
</h2>
</div>
<div class="col-md-8">
<img class="class-pic" src="http://placehold.it/775x450/">
</div>
</div>
</div>
<div class="container-fluid container-section-body">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum aliquet felis, a mollis tortor consectetur vitae. Nulla vestibulum velit nisl, ac mollis libero ornare et. Maecenas sed lacus non nibh suscipit elementum. Duis efficitur mi felis, scelerisque auctor ante gravida at. Integer in enim mattis, aliquam elit id, feugiat leo. Nullam vel eros magna. In porttitor risus nisi. Fusce efficitur viverra nulla nec fringilla. In id nisi est.
<br>
Ut id nunc vel urna placerat auctor. Phasellus rutrum, lacus sit amet semper posuere, arcu diam placerat ligula, non ultrices ante lorem a turpis. Sed pulvinar, est id interdum blandit, mi leo feugiat urna, id congue nisl ligula at lectus. Ut ac elit vel libero aliquet consequat. Integer et nisi lectus. Cras mattis efficitur risus auctor pharetra. Nulla commodo nulla et placerat varius. Nunc vulputate lectus et odio lacinia, sit amet auctor nisl tincidunt. Ut a nisl vitae sapien porta ultricies in pharetra sem. Nam a tellus vitae odio congue blandit ac eu ligula.
</p>
</div>
</section>
<section class="section-body" id="speaker">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe class="flexible" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3013.689769888508!2d-74.038378684919!3d40.944465879307266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2faa1360480df%3A0x875be3f4c98f864b!2s55+Pyle+St%2C+Oradell%2C+NJ+07649!5e0!3m2!1sen!2sus!4v1469213397652" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-md-6 col-content col-about">
<h2 class="about-headers">What</h2>
<p class="about-text">
River Dell STEMposium 2017
</p>
<h2 class="about-headers">When</h2>
<p class="about-text">
May 24, 2016
<br>
7:00 pm - 10:00 pm
</p>
<h2 class="about-headers">Where</h2>
<p class="about-text">
River Dell Regional High School
<br>
In the Cafeteria
</p>
</div>
</div>
</div>
<div class="container-fluid breaks">
<div class="row">
<div class="col-md-4 col-content col-title-sm-left">
<h2 class="about-headers">
<br>
<br>
The
<br>
Science
<br>
Research
<br>
Class
</h2>
</div>
<div class="col-md-8">
<img class="class-pic" src="http://placehold.it/775x450/">
</div>
</div>
</div>
<div class="container-fluid container-section-body">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum aliquet felis, a mollis tortor consectetur vitae. Nulla vestibulum velit nisl, ac mollis libero ornare et. Maecenas sed lacus non nibh suscipit elementum. Duis efficitur mi felis, scelerisque auctor ante gravida at. Integer in enim mattis, aliquam elit id, feugiat leo. Nullam vel eros magna. In porttitor risus nisi. Fusce efficitur viverra nulla nec fringilla. In id nisi est.
<br>
Ut id nunc vel urna placerat auctor. Phasellus rutrum, lacus sit amet semper posuere, arcu diam placerat ligula, non ultrices ante lorem a turpis. Sed pulvinar, est id interdum blandit, mi leo feugiat urna, id congue nisl ligula at lectus. Ut ac elit vel libero aliquet consequat. Integer et nisi lectus. Cras mattis efficitur risus auctor pharetra. Nulla commodo nulla et placerat varius. Nunc vulputate lectus et odio lacinia, sit amet auctor nisl tincidunt. Ut a nisl vitae sapien porta ultricies in pharetra sem. Nam a tellus vitae odio congue blandit ac eu ligula.
</p>
</div>
</section>
<section class="section-body" id="presentations">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe class="flexible" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3013.689769888508!2d-74.038378684919!3d40.944465879307266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2faa1360480df%3A0x875be3f4c98f864b!2s55+Pyle+St%2C+Oradell%2C+NJ+07649!5e0!3m2!1sen!2sus!4v1469213397652" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-md-6 col-content col-about">
<h2 class="about-headers">What</h2>
<p class="about-text">
River Dell STEMposium 2017
</p>
<h2 class="about-headers">When</h2>
<p class="about-text">
May 24, 2016
<br>
7:00 pm - 10:00 pm
</p>
<h2 class="about-headers">Where</h2>
<p class="about-text">
River Dell Regional High School
<br>
In the Cafeteria
</p>
</div>
</div>
</div>
<div class="container-fluid breaks">
<div class="row">
<div class="col-md-4 col-content col-title-sm-left">
<h2 class="about-headers">
<br>
<br>
The
<br>
Science
<br>
Research
<br>
Class
</h2>
</div>
<div class="col-md-8">
<img class="class-pic" src="http://placehold.it/775x450/">
</div>
</div>
</div>
<div class="container-fluid container-section-body">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum aliquet felis, a mollis tortor consectetur vitae. Nulla vestibulum velit nisl, ac mollis libero ornare et. Maecenas sed lacus non nibh suscipit elementum. Duis efficitur mi felis, scelerisque auctor ante gravida at. Integer in enim mattis, aliquam elit id, feugiat leo. Nullam vel eros magna. In porttitor risus nisi. Fusce efficitur viverra nulla nec fringilla. In id nisi est.
<br>
Ut id nunc vel urna placerat auctor. Phasellus rutrum, lacus sit amet semper posuere, arcu diam placerat ligula, non ultrices ante lorem a turpis. Sed pulvinar, est id interdum blandit, mi leo feugiat urna, id congue nisl ligula at lectus. Ut ac elit vel libero aliquet consequat. Integer et nisi lectus. Cras mattis efficitur risus auctor pharetra. Nulla commodo nulla et placerat varius. Nunc vulputate lectus et odio lacinia, sit amet auctor nisl tincidunt. Ut a nisl vitae sapien porta ultricies in pharetra sem. Nam a tellus vitae odio congue blandit ac eu ligula.
</p>
</div>
</section>
<section class="section-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe class="flexible" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3013.689769888508!2d-74.038378684919!3d40.944465879307266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2faa1360480df%3A0x875be3f4c98f864b!2s55+Pyle+St%2C+Oradell%2C+NJ+07649!5e0!3m2!1sen!2sus!4v1469213397652" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="col-md-6 col-content col-about">
<div id="contact"></div>
<h2 class="about-headers">What</h2>
<p class="about-text">
River Dell STEMposium 2017
</p>
<h2 class="about-headers">When</h2>
<p class="about-text">
May 24, 2016
<br>
7:00 pm - 10:00 pm
</p>
<h2 class="about-headers">Where</h2>
<p class="about-text">
River Dell Regional High School
<br>
In the Cafeteria
</p>
</div>
</div>
</div>
<div class="container-fluid breaks">
<div class="row">
<div class="col-md-4 col-content col-title-sm-left">
<h2 class="about-headers">
<br>
<br>
The
<br>
Science
<br>
Research
<br>
Class
</h2>
</div>
<div class="col-md-8">
<img class="class-pic" src="http://placehold.it/775x450/">
</div>
</div>
</div>
<div class="container-fluid container-section-body">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum aliquet felis, a mollis tortor consectetur vitae. Nulla vestibulum velit nisl, ac mollis libero ornare et. Maecenas sed lacus non nibh suscipit elementum. Duis efficitur mi felis, scelerisque auctor ante gravida at. Integer in enim mattis, aliquam elit id, feugiat leo. Nullam vel eros magna. In porttitor risus nisi. Fusce efficitur viverra nulla nec fringilla. In id nisi est.
<br>
Ut id nunc vel urna placerat auctor. Phasellus rutrum, lacus sit amet semper posuere, arcu diam placerat ligula, non ultrices ante lorem a turpis. Sed pulvinar, est id interdum blandit, mi leo feugiat urna, id congue nisl ligula at lectus. Ut ac elit vel libero aliquet consequat. Integer et nisi lectus. Cras mattis efficitur risus auctor pharetra. Nulla commodo nulla et placerat varius. Nunc vulputate lectus et odio lacinia, sit amet auctor nisl tincidunt. Ut a nisl vitae sapien porta ultricies in pharetra sem. Nam a tellus vitae odio congue blandit ac eu ligula.
</p>
</div>
</section>
</div>
<footer>
<div class="container footer-contents">
<p>© 2017 River Dell Regional High School</p>
<p>Made by humans</p>
</div>
</footer>
<!--- JS --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
<script>
function initMap(){
var isDraggable = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false
var mapOptions = {
draggable: isDraggable,
scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page
//... options options options
};
}
</script>
</html>
答案 0 :(得分：0)
检查部分和列表项的ID，对于活动外观
必须相同答案 1 :(得分：0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<li><a href="#about">ABOUT</a></li>
<div id="about">
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>