How to fixed bootstrap navbar at top on scroll

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>