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顶部固定导航栏 - 滚动时缩小

回答

相关问题