how to make a transparent navbar visible when scrolling

Something like this website

This is what I am trying to achieve:

  1. The navbar is transparent on top of the page and
  2. On scrolling it goes from transparent to taking specific color.

I have done a lot of research on this but nothing helped. I have tried affix plugin and jQuery but found them to be very confusing. I am new to jQuery and find it a little difficult to understand and implement :(

html, body {
  margin:0; 
  padding:0;
}

body {
  position:relative;
  height:200px;
}

.nav {
  margin:0px;	
}

.navbar{
  background:transparent;
  background-color:transparent;
  border-color:transparent;
  margin-bottom:0px;
  font-family: 'Droid Serif', serif;
  font-size:20px;
}

.navbar-brand {
  font-size:20px;
  font-family: 'Droid Serif', serif;
}

header {
  text-align: center;
  color: #fff;
  background-attachment: scroll;
  background-image: url("work.jpg");
  background-position: center center;
  background-repeat: none;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

header .intro-text {
  padding-top: 100px;
  padding-bottom: 50px;
}

header .intro-text .intro-heading {
  margin-bottom: 25px;
  text-transform: uppercase;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
}

@media(min-width:768px) {
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
  }

  header .intro-text .intro-heading {
    margin-bottom: 50px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 75px;
    font-weight: 700;
    line-height: 75px;
  }
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
    <!-- Custom CSS -->
    <link href="css.css" rel="stylesheet" type='text/css'>
    <!--font family-->
    <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
  </head>
  <body data-spy="scroll" data-target=".navbar" data-offset="50"> 
    <!--Navigation-->	 
    <nav class="navbar navbar-inverse  navbar-fixed-top" >
      <div class="conatiner-fluid">
        <!--page scroll button for -->
        <div class="navbar-header" role="navigation">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>			
          </button>
          <a class="navbar-brand" href="#">Website</a>
        </div>	<!--page scroll button-->
        <div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
              <li ><a href="#">Home</a></li>
              <li ><a href="#about">About</a></li> 
              <li ><a href="#services">Services</a></li>
              <li ><a href="#contact">Contact</a></li>
            </ul>
          </div> <!--ul-li-->
        </div> <!--navbar collapse-->
      </div> <!--container-fluid-->
    </nav>
    <!--Navigation-->
    <!--Header-->
    <header>
      <div class="container" >
        <div class="intro-text">
          <!--<div class="intro-lead-in">Welcome To Our Studio!</div>-->
          <div class="intro-heading">You have landed our page!</div>
          <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
        </div>
      </div>
    </header>
    <!--Header-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  </body>
</html>

Answers 1

  • When $(window).scroll check if $(window).scrollTop() greater than 50px. If so, add class .trans and remove it if doesn't.

    Add the style

    .navbar.trans {
       background:transparent !important;   
    }
    

    To your css.

    Your working code:

    $(window).scroll(function() {
      var offset = $(window).scrollTop();
      console.log(offset);
      $('.navbar').toggleClass('trans', offset > 50);
    });
    html, body {
      margin:0; 
      padding:0;
    }
    
    body {
      position:relative;
      height:200px;
    }
    
    .nav {
      margin:0px;	
    }
    
    .navbar{
      background:transparent;
      background-color:transparent;
      border-color:transparent;
      margin-bottom:0px;
      font-family: 'Droid Serif', serif;
      font-size:20px;
    }
    
    .navbar-brand {
      font-size:20px;
      font-family: 'Droid Serif', serif;
    }
    
    header {
      text-align: center;
      color: #fff;
      background-attachment: scroll;
      background-image: url("work.jpg");
      background-position: center center;
      background-repeat: none;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
    }
    
    header .intro-text {
      padding-top: 100px;
      padding-bottom: 50px;
    }
    
    header .intro-text .intro-heading {
      margin-bottom: 25px;
      text-transform: uppercase;
      font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 50px;
      font-weight: 700;
      line-height: 50px;
    }
    
    @media(min-width:768px) {
      header .intro-text {
        padding-top: 300px;
        padding-bottom: 200px;
      }
    
      header .intro-text .intro-heading {
        margin-bottom: 50px;
        text-transform: uppercase;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 75px;
        font-weight: 700;
        line-height: 75px;
      }
    }
    
    .navbar.trans {
      background:transparent !important;  
    }
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
        <!-- Custom CSS -->
        <link href="css.css" rel="stylesheet" type='text/css'>
        <!--font family-->
        <link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
      </head>
      <body data-spy="scroll" data-target=".navbar" data-offset="50"> 
        <!--Navigation-->	 
        <nav class="navbar navbar-inverse  navbar-fixed-top" >
          <div class="conatiner-fluid">
            <!--page scroll button for -->
            <div class="navbar-header" role="navigation">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>			
              </button>
              <a class="navbar-brand" href="#">Website</a>
            </div>	<!--page scroll button-->
            <div>
              <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                  <li ><a href="#">Home</a></li>
                  <li ><a href="#about">About</a></li> 
                  <li ><a href="#services">Services</a></li>
                  <li ><a href="#contact">Contact</a></li>
                </ul>
              </div> <!--ul-li-->
            </div> <!--navbar collapse-->
          </div> <!--container-fluid-->
        </nav>
        <!--Navigation-->
        <!--Header-->
        <header>
          <div class="container" >
            <div class="intro-text">
              <!--<div class="intro-lead-in">Welcome To Our Studio!</div>-->
              <div class="intro-heading">You have landed our page!</div>
              <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
            </div>
          </div>
        </header>
        <!--Header-->
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
      </body>
    </html>


Related Articles