
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
Bootstrap
Cmd
CodeIgniter
Css
Drupal
Git
Html
Javascript
Jquery
Laravel
Nodejs
Php
Python
Sql
Typescript
Wordpress
Random Code Snippet Queries: Javascript
- How to get the length of a number in JavaScript
- How to push string in an array in Javascript
- How to get query string value in javascript
- Check if value exists in array javascript
- Uncaught TypeError: $(...).summernote is not a function
- Get hostname from URL in javascript
- How to echo array in Javascript
- How to use JavaScript to search for items in a list
- How can I add a key/value pair to a JavaScript object
- How to preview video before uploading in javascript
- Uncaught TypeError: Illegal invocation
- Concat variable with string in javascript
- ReferenceError: $ is not defined
- Multidimensional array example javascript
- How to check caps lock is on in javascript
- JavaScript test() Method
- How to make entire Div clickable in javascript
- Javascript get only 10 characters from string
- Deault order of record in datatable
- Get multiplication in javascript using array input
- How to add a property to object with condition in javascript
- How to crop multiple images with cropper js
- Copy one array to another in javascript
- How to show and hide placeholder text
- How to get file extension using javascript/jquery