JS Header-Elemente ausblenden und Größe der Navigationsleiste auf Blättern

Question

Ich habe eine große Kopfzeile für eine Website, die in drei Abschnitte aufgeteilt ist; soziale Links, Logo und dann die Navigationsleiste. Ich versuche herauszufinden, wie ich die beiden oberen Elemente verstecken und die Größe der Navigationsleiste ändern kann, wenn der Benutzer daran vorbei scrollt.

Die Navigationsleiste enthält momentan nur einen Link, der ein separates Seitenmenü öffnet, das die gesamte Seitennavigation enthält.

https://jsfiddle.net/cxekxrxy/2/

<header> 
    <!-- social links --> 
    <div id="social" class="social-header"> 
     <div class="container"> 
      <div class="row"> 
       <ul> 
        <li class="social-icon"><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li> 
        <li class="social-icon"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> 
        <li class="social-icon"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> 
        <li class="social-icon"><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <!-- logo --> 
    <div id="logo" class="logo-header"> 
     <div class="container"> 
      <div class="row"> 
       <h1 class="logo-main">Main Header</h1> 
       <h2 class="logo-sub">Sub Header</h2> 
      </div> 
     </div> 
    </div> 
    <!-- Navigation --> 
    <div id="header" class="main-header"> 
     <div class="container"> 
      <div id="bars"><a href="#"><span class="glyphicon glyphicon-menu-hamburger text-right" id="nav-bars" style="font-size:25px; cursor:pointer" onclick="openNav()"></span></a></div> 
     </div> 
     <!-- nav links (hidden until <span> is pressed) --> 
     <div id="main-nav" class="side-nav"> 
      <a href="javascript:void(0)" class="btnClose" onclick="closeNav()">&times;</a> 
      <a href="default.aspx"><span class="glyphicon glyphicon-home"> Home</span></a> 
      <a href="#"><span class="glyphicon glyphicon-user"> About</span></a> 
      <a href="#"><span class="glyphicon glyphicon-picture"> Portfolio</span></a> 
      <a href="#"><span class="glyphicon glyphicon-envelope"> Contact</span></a> 
     </div> 
    </div> 
</header> 

Answer 1

Sie können dieses schöne Beispiel für die Notwendigkeit sehen: https://css-tricks.com/scroll-fix-content/ Und mit Ihrem Code arbeiten.

Dies ist die Kombination CSS und JS, und eine einfache Lösung .