How to Change Bootstrap 5 navigation bar styling on scroll without using jQuery
Tags: javascript, bootstrap, programming, css
Published: 2022-01-13 12:33:07

Suppose you want to change the background color of your bootstrap 5 navigation bar on scroll and you do not want to use jQuery for this behaviour . As the official documentation of Bootstrap says

> Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery. 


In this blog post, we will have a look about how can we achieve this behavior without the use of jQuery . 

First, let us add a bootstrap 5 CDN in index.html file . Also let us import style.css file which is located inside stylesheets folder . 

## HTML Code

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Navigation bar Scroll</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="stylesheets/style.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
</html>
```

Then, inside the body tag add a navigation menu and three different div for home, about and services .

## HTML Code

```html

<body>
  <nav class="navbar navbar-expand-sm fixed-top">
    <div class="container">
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="home">
  </div>
       
  <div id="about">
  </div>

  <div id="services">
  </div>
 </body>
<script src="script.js"></script>

```


Also, we have added a script tag to call script.js file after loading the HTML content . We will add logic to script.js file later . 

Now, let us go to style.css file and add some styling in order to differentiate three sections: home, about and services . 

## CSS

```css
#home {
    background-color: #00ffff;
}

#about {
    background-color: #0000ff;
}

#services {
    background-color: #a52a2a;
}
#home, #about, #services {
    height: 100vh;
}
```

Here you can see three sections occupying their respective heights with different background colors. 

Now comes the interesting part !

<img width="100%" style="width:100%" src="https://media.giphy.com/media/3oKIPbNb1vWdftiVLq/giphy.gif">

We will now add logic to script.js file in order to change our nav bar styling on scroll . 

## JavaScript

```javascript
const header = document.querySelector('.navbar');

window.onscroll = function() {
    var top = window.scrollY;
    console.log(top);
    if(top >= 100) {
        header.classList.add('darkNavBar');
    }
    else {
        header.classList.remove('darkNavBar');
    }
}
```
And, lastly update style.css file

```css
.darkNavBar {
  background-color: #000000;
}
```
This is how our navbar looks !

<img width="100%" style="width:100%" src="https://media.giphy.com/media/WPnmZAN2oh5Mohjvx5/giphy.gif">


Let us understand what the above javascript code does .

- First, we have used `document.querySelector` to return the first Element within the document that matches the specified selector, in this case it's `.navbar` . 

- Then we have added a `window.onScrollY` function which basically checks if the number of pixels that the document is currently scrolled vertically is greater than or equal to 100 .

- It it's true it adds a new class called `darkNavBar` to the querySelector i.e. `.navbar` . 


## Conclusion

This is how you can change the styling of navigation bar on scroll using JavaScript . I hope you enjoyed this blog post . Feel free to share your thoughts on this . You can find me on [Twitter](https://twitter.com/saam_codes) for daily contents on Web development .