Bootstrap: Navbar links do not receive active class in the scroll on time

Question

Bootstrap: Navbar links do not receive active class in the scroll on time

I am utilizing Bootstrap 4.

After implementing a smooth scroll feature, I had to adjust it by 80px due to my fixed navbar at the top.

$('#navbar').find('a').click(function (event) {
        event.preventDefault();
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 80
        }, 750);
    });

However, I am struggling with adjusting Bootstrap's active class on the links. The class is only applied when the anchored section reaches the top of the browser screen, but my navbar overlaps.

Do you have any suggestions?

Thank you for your assistance!

javascript bootstrap-4 navbar

Answer 1

Answer №1

Try implementing this solution:

$(document).ready(function() {
    $('.navbar-nav a').click(function (event) {
        event.preventDefault();

        var target = $(this).attr("href");
        var targetOffset = $(target).offset().top - 80;
      
        $('html, body').stop().animate({
            scrollTop: targetOffset
        }, 750);
    });
});

$(window).scroll(function() {
    // Get windows scroll top offset and add your 80px. You can add the section padding or margin if you like.
    var windowScroll = $(window).scrollTop() + 80;

    // Assign active class to nav links while scrolling
    // (index) will return how many sections you have
    // Replace (section) with your sections class
    $('section').each(function(index) {         
        // Check offset
        if ( $(this).offset().top <= windowScroll ) {
            $('.navbar-nav a.active').removeClass('active');
            $('.navbar-nav a').eq(index).addClass('active');
        }
    });

}).scroll();

.wrap {
  margin-top: 100px
}
section {
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Navbar</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" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#section1">section1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section2">section2</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link" href="#section3">section3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section4">section4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section5">section5</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container wrap">
    <section id="section1" class="jumbotron">
        <h4>Section 1</h4>
            <p>Providing a sample text for Section 1.</p>  
    </section>
    
    <section id="section2" class="jumbotron">
        <h4>Section 2</h4>
            <p>A placeholder text for Section 2.</p>  
    </section>
    <section id="section3" class="jumbotron">
        <h4>Section 3</h4>
            <p>Insert content for Section 3 here.</p>  
    </section>
    <section id="section4" class="jumbotron">
        <h4>Section 4</h4>
            <p>Customize information for Section 4 as needed.</p>  
    </section>
    <section id="section5" class="jumbotron">
        <h4>Section 5</h4>
            <p>Populate this section with relevant data.</p>  
    </section>
</div>

Answer 2

Try implementing this solution:

$(document).ready(function() {
    $('.navbar-nav a').click(function (event) {
        event.preventDefault();

        var target = $(this).attr("href");
        var targetOffset = $(target).offset().top - 80;
      
        $('html, body').stop().animate({
            scrollTop: targetOffset
        }, 750);
    });
});

$(window).scroll(function() {
    // Get windows scroll top offset and add your 80px. You can add the section padding or margin if you like.
    var windowScroll = $(window).scrollTop() + 80;

    // Assign active class to nav links while scrolling
    // (index) will return how many sections you have
    // Replace (section) with your sections class
    $('section').each(function(index) {         
        // Check offset
        if ( $(this).offset().top <= windowScroll ) {
            $('.navbar-nav a.active').removeClass('active');
            $('.navbar-nav a').eq(index).addClass('active');
        }
    });

}).scroll();

.wrap {
  margin-top: 100px
}
section {
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="navbar" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Navbar</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" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#section1">section1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section2">section2</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link" href="#section3">section3</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section4">section4</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section5">section5</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container wrap">
    <section id="section1" class="jumbotron">
        <h4>Section 1</h4>
            <p>Providing a sample text for Section 1.</p>  
    </section>
    
    <section id="section2" class="jumbotron">
        <h4>Section 2</h4>
            <p>A placeholder text for Section 2.</p>  
    </section>
    <section id="section3" class="jumbotron">
        <h4>Section 3</h4>
            <p>Insert content for Section 3 here.</p>  
    </section>
    <section id="section4" class="jumbotron">
        <h4>Section 4</h4>
            <p>Customize information for Section 4 as needed.</p>  
    </section>
    <section id="section5" class="jumbotron">
        <h4>Section 5</h4>
            <p>Populate this section with relevant data.</p>  
    </section>
</div>

Answer 3

Answer №2

After some experimenting, I decided to modify my approach by increasing the padding on the sections and removing the 80px adjustment in the JavaScript code. As a result, the navbar now overlaps with the 80px padding instead. While this isn't exactly the outcome I was aiming for, it does the job for now.

If anyone has a solution that aligns more closely with my original vision, I would love to hear it!

Appreciate any input

Answer 4

After some experimenting, I decided to modify my approach by increasing the padding on the sections and removing the 80px adjustment in the JavaScript code. As a result, the navbar now overlaps with the 80px padding instead. While this isn't exactly the outcome I was aiming for, it does the job for now.

If anyone has a solution that aligns more closely with my original vision, I would love to hear it!

Appreciate any input

Bootstrap: Navbar links do not receive active class in the scroll on time

Answer №1

Answer №2

Similar questions

Design a dynamic dropdown feature that is triggered when the chip element is clicked within the TextField component

Altering the playback of a flash object using HTML or JavaScript

Issue encountered during upgrade from version 10 to version 13 in a Next.js migration: Module not found

Update the observability status of one observable using a different observable

Ways to effectively conceal an HTML div element with CSS or JavaScript

Ensuring that a canvas remains centered and completely visible within its parent element while zooming in React

I'm curious about how I can selectively utilize vuex-persistedstate with Nuxt for certain stores only

What is the most efficient way to retrieve a substantial volume of data from Mongodb quickly, especially when the query results require processing before transmitting to the client?

Obtain the value of an element from the Ajax response

Having trouble displaying the desired formatting when mapping through nested JSON in Node ES6

Reload iframe content using a .php file within a different iframe

What is the origin of this mysterious error?

Is there a substitute for useState in a Next.js server component?

Execute the calculation on the user's AWS account

Strange symbols keep appearing in my output from PHP

What is the best way to set an initial value retrieved from the useEffect hook into the textField input field?

What is the best way to access the front camera on both Android and iOS devices in order to capture a photo using Vue.J

Leveraging em units in jQuery Script

I'm puzzled as to why a div tag suddenly becomes invisible when I attempt to link it with a v-for directive in my code

Merge JSON objects into an array