向下滚动时，导航栏变为透明并固定到顶部

时间：2016-06-02 07:47:24

标签： jquery html css twitter-bootstrap

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

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

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

这是我的导航栏：

screen shot of navbar 

.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>

3 个答案:

答案 0 :(得分：1)

在这里，您只需设置＆＃39; XXXXX＆＃39;数据与你的价值观。 $ navDiv是导航容器div的jQuery对象，例如$（＆＃39;＃nav＆＃39;），＆＃39; YOUR_TOP_OFFSET＆＃39;是您的固定导航栏的偏移量，所以在您的情况下＆＃39; 0＆＃39;。 ＆＃39; YOU_TOP_VAL＆＃39;是滚动的像素值，该栏应该是固定的，所以在你的情况下，导航栏上方div的高度，你当然可以自动使用$（＆＃39; .top-bar-socials＆＃39;） .height（），或者＆＃34; navDiv＆＃34;的原始偏移量。

        var  $navDiv = 'YOUR_NAVBAR';

        function removePinClasses(object) {
          object.removeClass('pin-top');
          object.removeClass('pinned');
        }

        function updateElement(object, scrolled) {
            // Add position fixed (because its between top and bottom)
            if ('YOUR_TOP_VAL' <= scrolled && !object.hasClass('pinned')) {
              removePinClasses($navDiv);
              object.css('top', 'YOUR_TOP_OFFSET');
              object.addClass('pinned');
            }

            // Add pin-top (when scrolled position is above top)
            if (scrolled < 'YOUR_TOP_VAL' && !object.hasClass('pin-top')) {
              removePinClasses($(this));
              object.css('top', 0);
              object.addClass('pin-top');
            }
          });
        }

        updateElement($navDiv, $(window).scrollTop());
        $(window).on('scroll', function () {
          var $scrolled = $(window).scrollTop() + 'YOUR_TOP_OFFSET';
          updateElement($navDiv, $scrolled);
        });

使用CSS：

.pin-top {
  position: relative;
}

.pinned {
  position: fixed !important;
}

答案 1 :(得分：1)

这是一些想法。如果只有Chrome和Firefox 对你没问题。

HTML：

<div class="content">
    <div class="top"></div>
    <div class="nav"></div>
    <div class="slider"></div>
</div>

CSS：

body {
    margin:0px;
}
.top {
    height: 40px;
    background-color: #222;
}
.slider {
    height: 500px;
    background-color: #fed;
}
.nav {
    position: sticky;
    position: -webkit-sticky;
    height: 60px;
    background-color: rgba(255,255,255,0.5);
    top: 0;
}

答案 2 :(得分：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的高度。

相关问题
最新问题