0
Я работаю на этой странице здесь: https://rdhs-stemposium.github.io/2017/Bootstrap - Navbar будет scrollspy не показывает правильную активную ссылку
Я использую scrollspy перемещаться между разделами страницы. Обычно, когда вы переходите к этому разделу, секция получает активное появление в навигационной панели, чтобы указать, что вы находитесь в этом разделе. Однако с этой страницей, похоже, не работает, и я не уверен, почему.
Пожалуйста, помогите!
EDIT: Вот код:
<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>
Я просто проверил, и они все совпадают. –