Думаю, мне было бы проще правильно использовать событие "activ.bs.scrollspy" в Bootstrap scrollspy, чем "нарушать его правила", и просто переопределить навигацию href по умолчанию с помощью кода javascript.
Так что я бы посоветовал вам добавить идентификаторы в div и соответствующие фрагменты фрагментов для якорей, а Bootstrap даст вам цель в событии "activ.bs.scrollspy" через свойство obj.relatedTarget, переключив классы по мере необходимости и при необходимости удалите «активированный» класс из элементов навигации, чтобы он не выглядел как разделы связанные. Если у вас есть дополнительные разделы, попробуйте использовать скрытые якоря или вообще скрытую навигацию.
Конечно, самым чистым способом было бы, на мой взгляд, отказаться от scrollspy и использовать window.scrollY и $ (window) .on ('scroll', ...).
Проверьте фрагмент:
$(window).on('activate.bs.scrollspy', function (e, obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isBGLight = $(obj.relatedTarget).hasClass('bg-light');
$('.navbar').toggleClass('navbar-dark bg-dark', isBGLight)
.toggleClass('navbar-light bg-light', !isBGLight);
//Optional: Remove the active class from the anchor so it doesn't look like the nav is linked to the sections
$('.navbar-nav a[href="' + obj.relatedTarget + '"]').removeClass('active');
});
//Here we do the actual navigation
$('.navbar-nav a').click(function(e) {
//Prevent anchor's default behaviour of briefly jumping to the given section before navigating to another page
e.preventDefault();
//Substring to eliminate the leading "#"
window.location.href = $(e.target).attr('href').substring(1) + '.html';
})
.page-section {
padding: 70px 10px
}
.page-section.bg-dark * {
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="15">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<!--Notice I changed the hrefs to point to the div ids-->
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<!--Notice I added the id's to let Bootstrap do it's job-->
<div id="about" class="container-fluid bg-light page-section">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="services" class="container-fluid bg-dark page-section">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid bg-light page-section">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>