Bootstrap navbar on scroll

In this example below you will see how to do a Bootstrap navbar on scroll with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -Infamous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -Infamous ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap navbar on scroll</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="navbar-fixed-top">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <div class="triangle-contain">
          <a class="navbar-brand" href="#">
            <svg class="triangle" height=30 width="30" viewBox="0 0 64 64">
                <polygon fill="none" stroke="white" stroke-width="4" points="30,4 4,60 60,60"/>
                </polygon>
              </svg>
          </a>
        </div>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a class="text-right" href="#">Home</a></li>
          <li><a class="text-right" href="#">What We Do</a></li>
          <li><a class="text-right" href="#">Our Work</a></li>
          <li><a class="text-right" href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Infamous/bootstrap-navbar-on-scroll-dvBoEv */
/*====================
UNIVERSAL
====================*/
body {
  background-color: #666;
  height: 2000px;
  }
/*====================
HEADER
====================*/
.navbar-inverse {
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease 0s;
  border:none;
}

.navbar-inverse.black {
  background-color: rgba(0, 0, 0, 1);
  transition: background-color 0.2s ease 0s;
  border:none;
}


/*====================
LOGO
====================*/
.triangle {
  -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
}

.triangle-contain {
  padding-left: 10px;
}
/*====================
LINKS
====================*/
.navbar-inverse .navbar-nav > li > a {
  transition: color 0.5s ease;
  color: #FFF;
}

.navbar-inverse .navbar-nav > li > a:hover {
  color: #80CAA5;
}
/*====================
BUTTON
====================*/
.navbar-inverse .navbar-toggle {
    border: none;
}

.navbar-inverse .navbar-toggle:hover {
    background-color: none;
}

.navbar-inverse .navbar-toggle:focus {
    background-color: none;
}

.navbar-inverse .navbar-toggle:active {
    background-color: none;
}
/*====================
@MEDIA
====================*/
@media screen and (min-width: 480px) {

  }
}

/*Downloaded from https://www.codeseek.co/-Infamous/bootstrap-navbar-on-scroll-dvBoEv */
$(window).scroll(function() {
    if($(this).scrollTop() > 1) {
        $('.navbar-inverse').addClass('black');
    } else {
        $('.navbar-inverse').removeClass('black');
    }
});

Comments