0
我正在此網頁上的位置：https://rdhs-stemposium.github.io/2017/引導 - 導航欄將scrollspy沒有顯示正確的活動鏈接
我使用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>
我只是檢查，他們全部匹配。 –