2016-06-02 17 views
1

私のナビゲーションバーがこのサイトのように見えるようにします。スクロールダウンするとNavbarが透明になり、上部に固定されます

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

私がスクロールしていた場合、そのテンプレートのナビゲーションバーが透明になり、トップに固定となります。私はナビゲーションバーに同じことをしたい。私はHTMLとCSSとブートストラップに新しいです。誰か私にそれを行う方法や手がかりを与えることができますか?ここで

screen shot of navbar


.navbar-header{ 
 
\t height: 74px; 
 
\t } 
 
\t 
 
\t .navbar-toggle{ 
 
\t position: relative; 
 
\t top: 15px; 
 
\t } 
 
\t .navbar-default .navbar-nav > li > a { 
 
\t font-weight: 590; 
 
\t color: #949494; 
 
\t display: block; 
 
\t padding: 5px 35px 2px 45px; 
 
\t border-bottom: 3px solid transparent; 
 
\t line-height: 70px; 
 
\t text-decoration: none; 
 
\t transition: border-bottom-color 0.5s ease-in-out; 
 
\t -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 
\t } 
 
\t .nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{ 
 
\t \t color:#a92419; 
 
\t \t border-bottom-color: #a92419; 
 
\t } 
 
\t .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { 
 
\t \t color: #a92419; 
 
\t \t background-color: white; 
 
\t } 
 
\t .navbar-default{ 
 
\t background-color:#fff; 
 
\t margin: 0; 
 
\t 
 
\t } 
 
\t .nav>li>a { 
 
\t position: relative; 
 
\t } 
 
\t .navbar-default .navbar-right > li > a { 
 
\t padding: 0 30px; 
 
\t margin-right:6px; 
 
\t } 
 
\t .nav.navbar-nav > li{ 
 
\t display: :inline-block; 
 
\t } 
 
\t .nav.navbar-nav{ 
 
\t list-style-type:none; 
 
\t } 
 
\t .nav.navbar-nav > li > a:hover{ 
 
\t \t color:#a92419; 
 
\t border-bottom-color: #a92419; 
 
\t } 
 
\t .navbar-default .navbar-toggle .icon-bar { 
 
\t background-color:#a92419; 
 
\t margin:0 0 4px; 
 
\t width: 25px; 
 
\t height: 5px; 
 
\t margin-right: 13px; 
 
\t } 
 
\t .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ 
 
\t background: none; 
 
\t } 
 
\t button.navbar-toggle{ 
 
\t background:none; 
 
\t border:none; 
 
\t color:#000; 
 
\t margin: 0px; 
 
\t } 
 
\t .dropdown:hover .dropdown-menu { 
 
\t display: block; 
 
\t } 
 
\t 
 
\t .dropdown-menu>li>a:hover { 
 
\t \t color:#a92419; 
 
\t } 
 
\t .dropdown-menu>li>a { 
 
\t \t display: block; 
 
\t \t padding: 3px 20px; 
 
\t \t clear: both; 
 
\t \t font-weight: 400; 
 
\t \t line-height: 3em; 
 
\t \t color: #333; 
 
\t \t white-space: nowrap; 
 
\t } 
 
\t .dropdown:hover a.dropdown-toggle { 
 
\t border-bottom-color: #a92419; 
 
\t color:#a92419; 
 
\t } 
 
\t .top-bar-dark { 
 
\t background-color: #a92419; 
 
\t } 
 
\t 
 
\t .top-bar-light { 
 
\t background-color: #f3f3f3; 
 
\t } 
 
\t .top-bar-light .top-dark-right li { 
 
\t border-color: #ddd; 
 
\t } 
 
\t 
 
\t .top-bar-light .top-dark-right li a:hover { 
 
\t color: #32c5d2; 
 
\t } 
 
\t .top-bar-socials { 
 
\t line-height: 30px; 
 
\t padding-top: 5px; 
 
\t } 
 
\t .top-bar-socials:after { 
 
\t display: table; 
 
\t clear: both; 
 
\t content: ""; 
 
\t } 
 
\t .top-bar-socials a { 
 
\t margin: 0px 8px; 
 
\t text-decoration: none; 
 
\t font-size:18px; 
 
\t color: #fff; 
 
\t } 
 
\t 
 
\t .top-dark-right { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t } 
 
\t 
 
\t .top-dark-right li { 
 
\t line-height: 40px; 
 
\t border-left: 1px solid #932015; 
 
\t padding: 0px 10px; 
 
\t 
 
\t } 
 
\t 
 
\t .top-dark-right li, .top-dark-right li a { 
 
\t color: #d7d7d7; 
 
\t font-size: 12px; 
 
\t } 
 
\t 
 
\t .top-dark-right li i { 
 
\t margin-right: 5px; 
 
\t } 
 
\t 
 
\t .top-dark-right li a:hover { 
 
\t color: #fff; 
 
\t } 
 
\t a.login{ 
 
\t text-decoration: none; 
 
\t } 
 
\t .fa-facebook:hover{ 
 
\t color:#3b5998; 
 
\t } 
 
\t .fa-twitter:hover{ 
 
\t color:#1dcaff; 
 
\t } 
 
\t .fa-linkedin:hover{ 
 
\t color:#007bb5; 
 
\t }
<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"> 
 
\t <div class="row"> 
 
\t <div class="col-sm-4 col-xs-7"> 
 
\t \t <div class="top-bar-socials"> 
 
\t \t <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts"> 
 
\t \t \t <i class="fa fa-facebook"></i> 
 
\t \t </a> 
 
\t \t <a href="https://twitter.com/official_gapc"> 
 
\t \t \t <i class="fa fa-twitter"></i> 
 
\t \t </a> 
 
\t \t <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city"> 
 
\t \t \t <i class="fa fa-linkedin"></i> 
 
\t \t </a> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col-sm-8 col-xs-5 text-right"> 
 
\t \t <ul class="list-inline top-dark-right"> 
 
\t \t <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> [email protected]</li> 
 
\t \t <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li> 
 
\t \t <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a> 
 
\t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 
\t </div> 
 
    </div> 
 
</div> 
 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container"> 
 
\t <div class="navbar-header"> 
 
\t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
 
\t \t <span class="icon-bar"></span> 
 
\t \t <span class="icon-bar"></span> 
 
\t \t <span class="icon-bar"></span> 
 
\t </button> 
 
\t <img class="img-responsive" src="images/brandz.png"> 
 

 
\t </div> 
 

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

答えて

1

あなたはこのようなあなたのナビゲーションバーにdata-spyを追加することにより、ブートストラップのinbuildツールaffixを使用していることを行うことができます。

<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.150top-bar-black divの高さに置き換えます。

+0

スクロールするときのnavbarの幅は100%ではありません。わずか約80%の幅である。 – nethken

+0

ああ、 'width:100%;'を '.navbar.affix'に追加するのを忘れました。申し訳ありません。回答が更新されました。 –

+0

こんにちは、それはすでに働いて:)しかし、私はそれを透明なthoにすることはできますか? – nethken

1

あなたが行く、ちょうど自分の価値観で 'XXXXX' データを設定します。

これは私のナビゲーションバーです。$ navDivはナビゲーションコンテナdivのjQueryオブジェクトです(例: $( '#nav')、 'YOUR_TOP_OFFSET'は固定されたナビゲーションバーのオフセットですので、あなたの場合は '0'です。 'YOU_TOP_VAL'はスクロールするピクセル単位の値です。その場合、ナビバーの上のdivの高さを修正する必要があります。もちろん、$( '。top-bar-socials')で自動的に行うことができます。 height()、または「navDiv」の元のオフセットを使用します。 CSSで

 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); 
     }); 

.pin-top { 
    position: relative; 
} 

.pinned { 
    position: fixed !important; 
} 
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; 
} 
関連する問題