Geek Answers Handbook

How to make transparent navigation visible when scrolling

Something like this site

This is what I am trying to achieve:

  • The navigation bar is transparent over the page and
  • When scrolling, it goes from transparent to a specific color.

I did a lot for this, but nothing helped. I tried the affix and jQuery plugin but found them 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 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>
+7
jquery html css3 twitter-bootstrap-3 navbar
source share
3 answers

Here you will find:

 $(window).scroll(function () { if ($(window).scrollTop() >= 50) { $('.navbar').css('background','red'); } else { $('.navbar').css('background','transparent'); } });

Working demo

+6
source share

You can add or remove the .transparent class in nav according to the position of the scroll bar.

 $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('transparent'); } else { $('nav').removeClass('transparent'); } });

and CSS:

 nav.navbar{ -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } nav.navbar-inverse { background-color: #222; border-color: #080808; } nav.navbar.transparent { background-color:rgba(0,0,0,0); }

Here is the solution with your code: http://jsfiddle.net/m7yww8oa/157/

+4
source share

When $(window).scroll check if $(window).scrollTop() greater than 50px . If so, add the .trans class and remove it if it is not.

Add 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 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>
+3
source share

More articles:


All Articles