Question

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

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

Answer 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个像素后，您的社交图标将不可见。

Bootstrap 3固定在顶部的Navbar - 滚动时变小

1 个答案: