how to make a transparent navbar visible when scrolling
Here you go:
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', 'red');
} else {
$('.navbar').css('background', 'transparent');
}
});
Working Demo
You can add or remove a .transparent class to the nav according to the position of scrollbar.
$(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/
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>