Something like this website
这就是我想要实现的目标：
>导航栏在页面顶部是透明的
>在滚动时,它从透明变为采用特定颜色.
我对此做了很多研究,但没有任何帮助.我已经尝试了附加插件和jQuery,但发现它们非常令人困惑.我是jQuery的新手,发现它有点难以理解和实现:(
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,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>
解决方法
干得好：
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background','red');
} else {
$('.navbar').css('background','transparent');
}
});
