Menu
I am using Bootstrap 4.0 to create a simple landing page and using ScrollSpy in this page but I am not able to make it work, it does not changing the active menu items.
index.html -
<body>
<!-- Navbar -->
<nav id="main-nav" class="navbar navbar-expand-lg bg-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><!-- some logo --></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#header">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#book">About Book</a></li>
<li class="nav-item"><a class="nav-link" href="#author">About Author</a></li>
<li class="nav-item"><a class="nav-link" href="#inspire">Inspire</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header id="header" class="header">
<!-- some content -->
</header>
<!-- About book -->
<section id="book" class="book py-5">
<!-- some content -->
</section>
<!-- About author -->
<section id="author" class="author py-5">
<!-- some content -->
</section>
<!-- Inspire -->
<section id="inspire" class="author py-5">
<!-- some content -->
</section>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.min.js"></script>
</body>
I have body{postsition: relative} in my style.css file.
main.js -
$(document).ready(function () {
// Scroll spy
$('body').scrollspy({
target: "#main-nav",
offset: 70
});
// Navbar fade
changeNavbar();
$(window).scroll(function () {
changeNavbar();
});
function changeNavbar() {
var navbar = $("#main-nav");
if ($(this).scrollTop() >= 100) {
navbar.addClass("bg-light").removeClass("bg-transparent");
} else if ($(this).scrollTop() < 100) {
navbar.removeClass("bg-light").addClass("bg-transparent");
}
}
});
I searched a lot but didn't get any solution, already wasted few hours, any help will be appreciated.
Thanks in advance.
580
To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element). Then add the data-target attribute with a value of the id or the class name of the navigation bar ( . navbar ). This is to make sure that the navbar is connected with the scrollable area.
The Bootstrap scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page.
Scrollspy is a bootstrap plugin that automatically updates links in a navigation list based on the current scroll position. In the example below, scroll down the HTML page and note how the sections in the navigation bar are updated accordingly.
The ScrollSpy component is applying the active class to the nav-item, but you can't see it because you don't have navbar-light class in the navbar.
The Bootstrap 4 CSS selector that applies the style (darker text color) is this:
.navbar-light .navbar-nav .nav-link.active {
color: rgba(0, 0, 0, 0.9);
}
So, just add the navbar-light class like this:
<nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light bg-transparent fixed-top">
</nav>
Demo: https://www.codeply.com/go/ic6Md3e4y1
86
Just add this Jquery code
$(window).scroll(function(){
$(".nav-item").removeClass("active");
$(".active").parent().addClass("active");
})
it will automatically add and remove active class to nav-item with reference to active nav-link
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
