how to change color of navbar when scrolling to bottom?

Question

I have 2 probelems. Problem-1: I am trying changing navbar background color when scrolling to bottom. I am trying to add the class but it couldn't override the bootstrap !important attribute. but I have override it using this line:

nav.scrolled {
  background-color: #e8e4e1 !important;
  box-shadow: 2px 10px 4px var(--section-bg-light);
}

problem-2: how to change navbar background with javascript while scrolling to the bottom of the page, footer of the page?

let navbar = document.querySelector('.navbar');
let section = document.querySelectorAll('section');

section.addEventListener('mouseover', addIt);

function addIt() {
    navbar.classList.remove('bg-transparent');
    navbar.classList.add('bg-dark');
}

nav.bg-dark {
    background-color: #e8e4e1 !important;
}

<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><img src="./img/logo-min.png" alt="JN-Fashion-Zone"></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item home">
                            <a class="nav-link" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Products</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contacts</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

[Changing nav-bar color after scrolling](https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling) — InspectorGadget, Jan 01 '21 at 14:42
If the `bg-dark` class is already being added when scrolling to the bottom and the problem you're trying to solve now is overriding Bootstrap's `!important`, you might want to change the title of your question to reflect that since those are two different issues. It sounds like you've already figured out how to apply the class, you just need to know how to do a CSS override. — MikeJ, Jan 03 '21 at 04:35
yeah i have figured out .. actually the question is not to how to override css.. the question was how to change background color while scrolling to the bottom?? i have seen some answer in stackoverflow. they used jquery. but I need a simple way with javascript only... — Moshiur Rahman Rony, Jan 04 '21 at 07:42

score 0 · Answer 1 · answered Jan 01 '21 at 14:40

0

Please check out How to override !important? You need to use high specificity to override the !important rule. Try adding more levels to your selector.

answered Jan 01 '21 at 14:40

Sharath N B

25
1
10

i have tried with this but it is not working.. `.bg-dark { background-color: #e8e4e1 !important; }` – Moshiur Rahman Rony Jan 01 '21 at 14:59
Please use selector with specificity. – Sharath N B Jan 01 '21 at 15:43
i also tried with specificity, but it is not working and I am not getting the solution for this problem.. ` header .bg-dark { background-color: #e8e4e1 !important; }` – Moshiur Rahman Rony Jan 01 '21 at 15:54
If you've confirmed that the `bg-dark` class has indeed been applied, you just need to keep increasing your selector specificity until it exceeds Bootstrap's. You can even resort to silliness like applying the same class selector multiple times, like this: `header .bg-dark.bg-dark { background-color: #e8e4e1 !important; }`. – MikeJ Jan 03 '21 at 04:48

score 0 · Answer 2 · edited May 01 '22 at 22:12

0

var nav = document.querySelector('nav');
window.addEventListener('scroll', function () {
  if (window.pageYOffset > 100) {
    nav.classList.add('bg-info', 'shadow');
  } else {
    nav.classList.remove('bg-info', 'shadow');
  }
});

edited May 01 '22 at 22:12

Alexander

16,091
5
13
29

answered Apr 27 '22 at 00:40

sezer

1
2

how to change color of navbar when scrolling to bottom?

2 Answers2