Bootstrap 3頂部固定導航欄 - 滾動時縮小

我有一個固定的頂部導航欄。當滾動邊時，它會跟着下去。現在的問題是我不知道如何「分割」導航欄。因爲我有徽標和按鈕，但我想在導航欄的右上方有社交媒體圖標。當我向下滾動時，這些應該消失，但按鈕和標誌應該留下。這個怎麼做？下面是導航欄的代碼：在一個div的<div class="collapse navbar-collapse"> 後Bootstrap 3頂部固定導航欄 - 滾動時縮小

<div class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="brand" href="#"><img src="Materialien/LogoV2_300x75_72ppi.png" alt="Design und Data" width="50%" height="50%" /></a> 
    </div> 
    <div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#about">Leistungen</a></li> 
     <li><a href="#contact">Über Uns</a></li> 
     <li><a href="#contact">Team</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Aktuelles <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Alle Artikel</a></li> 
     </ul> 
     </li> 
     <li><a href="#contact">Kunden</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Jobs <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Alle Jobs</a></li> 
      </ul> 
     </li> 
     <li><a href="#contact">Kontakt</a></li> 
    <form class="navbar-search"> 
      <input type="text" class="search-query span3" placeholder="Search"> 
     </form> 

    </ul> 
    </div> 
</div>

來源

2014-04-03 lena

1.增加你的社交媒體圖標<div class="social-icons">

2.添加下面的JavaScript：

<script> 
    $(document).scroll(function() { 
     $("#navbar").toggleClass("tiny",$(document). scrollTop() > 50); 
    }); 
</script>

3 。並在你的CSS中加入：

.tiny .social-icons { 
    display: none; 
}

當你將50個像素向下滾動時，你的社交圖標將不可見。

來源

2014-04-06 17:47:37

Bootstrap 3頂部固定導航欄 - 滾動時縮小

回答

相關問題