How to fixed bootstrap navbar at top on scroll

Created at 04-Aug-2021 , By samar

How to fixed bootstrap navbar at top on scroll

In this session, we’ll try our hand at solving the "How to fixed bootstrap navbar at top on scroll" puzzle by using the computer language.

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

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.