Bootstrap 3 fixed Navbar on the top - getting smaller when scrolling

Question

I have a fixed top navbar. It follows down when scrolling the side. The problem now is I don't know how to "split" the navbar. Because I have the logo and buttons but I want to have social media icons on the right top of the navbar. Those should vanish when I scroll down the side but the buttons and logo should stay. How to do this? Here's the navbar code:

<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.Add your social media icons after the <div class="collapse navbar-collapse"> in a div <div class="social-icons">

2.Add following javascript:

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

3.And in your css add:

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

and after you scolled 50 pixels down your social-icons will be invisible.