CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4navbar
chibiw3n
chibiw3n

Reputation: 367

My Navbar is not changing color on scroll after adding javascript

I am not familiar with javascript and copied the javascript portion from a tutorial I was watching. However, it does not seem to be working and the Navbar is not changing color when scrolled. I am not sure if the javascript is not working, the css, or if I should add 'scrolled' to the Navbar class as well. Thank you.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(window).scroll(function(){ $('nav').toggleClass('scrolled', $(this).scrollTop() > 1080);
}); 
</script>
<style>
  navbar.scrolled{
    background-color: darkgray !important;
  }
</style>
</head>
<body>
 
<header>
  <div class="container-fluid">
    <div class="navbar navbar-light navbar-expand-md fixed-top">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#uniqueIdentifier">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div id="uniqueIdentifier" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Skills</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content" style="height:200vh;"> 
  
  </div>
 </header>
 
</body>
</html>

Upvotes: 0

Views: 50

Answers (2)

Kishan Sharma
Kishan Sharma

Reputation: 47

Script should be placed at the bottom of the body tag so that it works after the dom has finished loading.

Upvotes: 0

Robert Cooper
Robert Cooper

Reputation: 2230

Add your script tag at the bottom of the body in order to register your event listener once the DOM has loaded. You're also not targetting the right DOM element in your CSS/jquery.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <style>
      div.navbar.scrolled {
        background-color: darkgray !important;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container-fluid">
        <div class="navbar navbar-light navbar-expand-md fixed-top">
          <a class="navbar-brand" href="#">Brand</a>
          <button
            class="navbar-toggler"
            data-toggle="collapse"
            data-target="#uniqueIdentifier"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div id="uniqueIdentifier" class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Skills</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content" style="height:200vh;"></div>
    </header>
    <script>
      $(window).scroll(function() {
        $("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 1080);
      });
    </script>
  </body>
</html>

Upvotes: 1

Related Questions