Bootstrap 3 将导航栏固定在顶部 - 滚动时变小答案

【问题标题】：Bootstrap 3 fixed Navbar on the top - getting smaller when scrollingBootstrap 3 将导航栏固定在顶部 - 滚动时变小
【发布时间】：2014-04-03 13:27:28
【问题描述】：

我有一个固定的顶部导航栏。滚动侧面时它会向下移动。现在的问题是我不知道如何“拆分”导航栏。因为我有徽标和按钮，但我想在导航栏的右上方有社交媒体图标。当我向下滚动侧面时，这些应该会消失，但按钮和徽标应该保留。这个怎么做？这是导航栏代码：

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

【问题讨论】：

标签： twitter-bootstrap hide navbar fixed

【解决方案1】：

1.在<div class="collapse navbar-collapse">之后添加您的社交媒体图标在一个 div 中 <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 像素后，您的社交图标将不可见。

【讨论】：