jquery - 向下滚动时导航栏变得透明并固定在顶部

Question

我希望我的导航栏看起来像这个网站。

http://bootstraplovers.com/templates/assan-v2.3/main-template/index.html

当我滚动时，该模板的导航栏变得透明并固定在顶部。我希望我的导航栏也能这样做。我是 HTML 和 CSS 以及 bootstrap 的新手。有人可以给我一些如何做的想法或任何线索吗？

这是我的导航栏:

<小时/>

.navbar-header{
	  height: 74px;
	}
	
	.navbar-toggle{
	  position: relative;
	  top: 15px;
	}
	.navbar-default .navbar-nav > li > a {
	 font-weight: 590;
	 color: #949494;
	 display: block;
	 padding: 5px 35px 2px 45px;
	 border-bottom: 3px solid transparent;
	 line-height: 70px;
	 text-decoration: none;
	 transition: border-bottom-color 0.5s ease-in-out;
	 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
	 }
	 .nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
		color:#a92419;
		border-bottom-color: #a92419;
	  }
	  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
		color: #a92419;
		background-color: white;
	}
	 .navbar-default{
	 background-color:#fff;
	 margin: 0;
	
	 }
	 .nav>li>a {
	 position: relative;
	 }
	.navbar-default .navbar-right > li > a {
	padding: 0 30px;
	margin-right:6px;
	 }
	 .nav.navbar-nav > li{
	 display: :inline-block;
	 }
	 .nav.navbar-nav{
	 list-style-type:none;
	 }
	 .nav.navbar-nav > li > a:hover{
		color:#a92419;
	   border-bottom-color: #a92419;
	  }
	  .navbar-default .navbar-toggle .icon-bar {
	  background-color:#a92419;
	  margin:0 0 4px;
	  width: 25px;
	  height: 5px;
	  margin-right: 13px;
	  }
	  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	  background: none;
	  }
	  button.navbar-toggle{
	  background:none;
	  border:none;
	  color:#000; 
	  margin: 0px;
	}
	.dropdown:hover .dropdown-menu {
	  display: block;
	}
	
	.dropdown-menu>li>a:hover {
		color:#a92419;
	}
	.dropdown-menu>li>a {
		display: block;
		padding: 3px 20px;
		clear: both;
		font-weight: 400;
		line-height: 3em;
		color: #333;
		white-space: nowrap;
	}
	.dropdown:hover a.dropdown-toggle {
	  border-bottom-color: #a92419;
	  color:#a92419;
	}
	.top-bar-dark {
	  background-color: #a92419;
	}
	
	.top-bar-light {
	  background-color: #f3f3f3;
	}
	.top-bar-light .top-dark-right li {
	  border-color: #ddd;
	}
	
	.top-bar-light .top-dark-right li a:hover {
	  color: #32c5d2;
	}
	.top-bar-socials {
	  line-height: 30px;
	  padding-top: 5px;
	}
	.top-bar-socials:after {
	  display: table;
	  clear: both;
	  content: "";
	}
	.top-bar-socials a {
	  margin: 0px 8px;
	  text-decoration: none;
	  font-size:18px;
	  color: #fff;
	}
	
	.top-dark-right {
	  margin: 0px;
	  padding: 0px;
	}
	
	.top-dark-right li {
	  line-height: 40px;
	  border-left: 1px solid #932015;
	  padding: 0px 10px;
	
	}
	
	.top-dark-right li, .top-dark-right li a {
	  color: #d7d7d7;
	  font-size: 12px;
	}
	
	.top-dark-right li i {
	  margin-right: 5px;
	}
	
	.top-dark-right li a:hover {
	  color: #fff;
	}
	a.login{
	  text-decoration: none;
	}
	.fa-facebook:hover{
	  color:#3b5998;
	}
	.fa-twitter:hover{
	  color:#1dcaff;
	}
	.fa-linkedin:hover{
	  color:#007bb5;
	}

<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-bar-dark">
  <div class="container">
	<div class="row">
	  <div class="col-sm-4 col-xs-7">
		<div class="top-bar-socials">
		  <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
			<i class="fa fa-facebook"></i>
		  </a>
		  <a href="https://twitter.com/official_gapc">
			<i class="fa fa-twitter"></i>
		  </a>
		  <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
			<i class="fa fa-linkedin"></i>
		  </a>
		</div>
	  </div>
	  <div class="col-sm-8 col-xs-5 text-right">
		<ul class="list-inline top-dark-right">
		  <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school@yahoo.com.ph</li>
		  <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
		  <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a>
		  </li>
		</ul>
	  </div>
	</div>
  </div>
</div>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span> 
	  </button>
	  <img class="img-responsive" src="images/brandz.png">

	</div>

	<div class="collapse navbar-collapse" id="nav-collapse">
	  <ul class="nav navbar-nav navbar-right">
		<li class="active"><a href="#">Home</a>
		</li>
		<li class="dropdown">
		  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About us</a>
		  <ul class="dropdown-menu">
			<li><a href="#">History</a>
			</li>
			<li><a href="#">Mission and Vision</a>
			</li>
		  </ul>
		  <li><a href="#">Admissions</a>
		  </li>
		  <li><a href="#">Contact us</a>
		  </li>
		  <li><a href="#">Faculty Portal</a>
		  </li>
	  </ul>
	</div>
  </div>
</nav>

Answer 1

您可以使用 bootstrap 的内置工具 affix 来完成此操作，方法是将 data-spy 添加到导航栏，如下所示:

<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="150">

并将其添加到您的 CSS 中:

.navbar.affix {
    position: fixed;
    top:0;
    width:100%;
    background-color: rgba(255,255,255,0.5); <-- Replace with the color you want
}

P.S. 将 150 替换为 top-bar-black div 的高度。