Skip to main content

How to fixed bootstrap navbar at top on scroll

You can fix the bootstrap navbar at the top on scroll. Bootstrap has a property fixed to fix the navbar at the top of the screen. You can add and remove this class using javascript

  • Fixed bootstrap navbar at top on scroll using javascript

    Bootstrap 4 Navbar (HTML)

    <div id="navbar_top" class="container-fluied bg-light shadow-sm">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav  class="navbar navbar-expand-lg navbar-light bg-light">
                        <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="{{ route('allGenerators') }}#html"> HTML   </a>
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" href="{{ route('allGenerators') }}#bootstrap"> Bootstrap   </a>
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" href="{{ route('allGenerators') }}#MySQL"> MySQL  </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('allGenerators') }}#laravel"> Laravel  </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('allGenerators') }}#codeigniter"> Codeigniter  </a> 
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" href="{{ route('allGenerators') }}#htaccess"> htaccess  </a>
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" href="{{ route('allGenerators') }}#cryptography"> Cryptography & Security  </a>
                                </li>
                                <li class="nav-item"> 
                                    <a class="nav-link" href="{{ route('allGenerators') }}#dummydata"> Dummy data  </a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    Javascript 

    <script>
    document.addEventListener("DOMContentLoaded", function(){
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                document.getElementById('navbar_top').classList.add('fixed-top');
                // add padding top to show content behind navbar
                navbar_height = document.querySelector('.navbar').offsetHeight;
                document.body.style.paddingTop = navbar_height + 'px';
            } else {
                document.getElementById('navbar_top').classList.remove('fixed-top');
                // remove padding top from body
                document.body.style.paddingTop = '0';
            } 
        });
    });
    </script>

    You can fixed bootstrap navbar on scroll in html using bootstrap navbar and javascript

  • Back to code snippet queries related javascript