滚动时如何使透明导航栏可见
Posted
技术标签:
【中文标题】滚动时如何使透明导航栏可见【英文标题】：how to make a transparent navbar visible when scrolling 【发布时间】：2016-07-14 19:11:26 【问题描述】：Something like this website
这就是我想要达到的目标：
-
导航栏在页面顶部是透明的，并且
滚动时，它会从透明变为特定颜色。
我对此进行了大量研究，但没有任何帮助。我尝试过 affix 插件和 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,"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>【问题讨论】：
“透明”是什么意思？ 【参考方案1】：给你：
$(window).scroll(function()
if ($(window).scrollTop() >= 50)
$('.navbar').css('background', 'red');
else
$('.navbar').css('background', 'transparent');
);
Working Demo
【讨论】：
【参考方案2】：您可以根据滚动条的位置在nav中添加或删除.transparent类。
$(window).scroll(function()
if ($(document).scrollTop() > 50)
$('nav').addClass('transparent');
else
$('nav').removeClass('transparent');
);
和 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);
这是您的代码的解决方案：http://jsfiddle.net/m7yww8oa/157/
【讨论】：
【参考方案3】：当$(window).scroll 检查$(window).scrollTop() 是否大于50px。如果是，请添加类 .trans，如果没有，则将其删除。
添加样式
.navbar.trans
background:transparent !important;
到你的CSS。
您的工作代码：
$(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>【讨论】：
以上是关于滚动时如何使透明导航栏可见的主要内容，如果未能解决你的问题，请参考以下文章