Reveal nav beim Scrollen nach unten

Question

Was ich versuche zu erreichen ist, wenn eine Seite nach unten gescrollt wird, ist die Navigation ausgeblendet - als ob sie oben auf dem Bildschirm verschwindet, wie es traditionell wäre. Wenn ein Benutzer die Seite zurückscrollt, wird die Navigation wieder sichtbar. Ebenso, wenn Sie erneut nach unten scrollen, ist es versteckt.

Ich habe ein paar verschiedene Plugins dafür ausprobiert und sie funktionieren fast. Die, die ich bin derzeit sehen, ist „jquery-enthüllt-Navigation“

-Link: https://github.com/weaintplastic/jquery-unveiled-navigation Beispiel: http://codepen.io/weaintplastic/full/RNpXOO/

Dieser fast tut, was ich will es. Es könnte mit einigen Klassen tun, sobald das Skript 'aktiv' ist. Da ich nur eine Hintergrundfarbe hinzufügen möchte, wenn das Skript 'aktiv' ist. So würde es transparent sein, bis die Navigation den Bildschirm verlassen hatte und nicht an der Spitze war.

Auch ich weiß mit dieser Navigation, wenn Sie zurück scrollen, so dass die halbe Navigation in Sicht ist, wird es schnell anpassen, so dass Sie die Bar in ihrer Gesamtheit sehen können. Aber ich mag die Idee, dass sie nur so viel anzeigt, wie du gescrollt hast. Wenn das Nav 100px groß ist und Sie 30px scrollen, sehen Sie nur die unteren 30px des Balkens. Zurückblättern würde die Leiste Pixel für Pixel wieder ausblenden - macht das Sinn?

So würden die Schritte (wenn dies macht es klarer):

1. Kopfzeile am oberen Rand der Seite, transparenten Hintergrund.
2. Beim Scrollen nach unten, Pixel für Pixel verlässt die Navigation den Bildschirm.
3. Wenn der Benutzer zurück scrollt, beginnt der Header wieder zu sich selbst zu zeigen - dieses Mal hat es eine Hintergrundfarbe.
4. Sobald der Header erneut oben im Browser erscheint, wird der Hintergrund entfernt.

Mein Markup ist ziemlich einfach. Die Leiste enthält nur ein Logo und eine Navigationsschaltfläche, da das Navigationsgerät ausgeblendet ist, bis der Schalter angeklickt wird, der den Vollbildmodus des Navigationsgeräts anzeigt.

<header class="page-head"> 

    <a href="#" class="page-head__home-link"></a> 

    <a href="#" class="page-head__toggle"><span>Menu</span></a> 

    <nav class="site-nav"> 
     <ul class="site-nav__list"> 
      <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
      <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
      <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
      <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
      <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
     </ul> 
    </nav> 

</header> 

Ich habe die SVG ich innerhalb page-head__home-link sonst haben es entfernt eine Wand Code sein würde!

Hoffnung jemand kann helfen :)

Answer 1

du ziemlich leicht ohne jquery oder eine Bibliothek tun. Sie müssen nur das Bildlaufereignis beobachten und wenn die Richtung sich ändert, platzieren Sie die Kopfzeile direkt über dem Sichtfeld und dann, während Sie weiter scrollen, stellen Sie sicher, dass es sich nie vom oberen Rand des übergeordneten Containers bewegt.

var body, direction, margin, pageHead, pageHeadHeight, scrolled; 
 

 
body = document.getElementById('tall'); 
 
scrolled = 0; 
 
direction = null; 
 
pageHead = document.getElementsByClassName('page-head')[0]; 
 
pageHeadHeight = pageHead.offsetHeight - 1; 
 
margin = 0; 
 

 
body.addEventListener("scroll", function(event) { 
 
    if (scrolled < body.scrollTop) { 
 
    direction = 'down'; 
 
    } else { 
 
    if (direction === 'down') { 
 
     direction = 'up'; 
 
     margin = Math.max(0, body.scrollTop - pageHeadHeight); 
 
    } 
 
    if (margin > body.scrollTop) { 
 
     margin = body.scrollTop; 
 
    } 
 
    pageHead.style['margin-top'] = margin + 'px'; 
 
    } 
 
    return scrolled = body.scrollTop; 
 
});

.tall { 
 
    background-color: blue; 
 
    min-height: 3000px; 
 
    min-width: 100%; 
 
} 
 
#tall { 
 
    max-height: 180px; 
 
    border: 3px solid pink; 
 
    overflow: auto; 
 
} 
 
.page-head{ 
 
    color: white; 
 
    display: inline-block; 
 
} 
 
a { 
 
    color: white; 
 
}

<div id="tall"> 
 
    <div class='tall'> 
 
    <header class="page-head"> 
 

 
     <a href="#" class="page-head__home-link"></a> 
 

 
     <a href="#" class="page-head__toggle"><span>Menu</span></a> 
 

 
     <nav class="site-nav"> 
 
      <ul class="site-nav__list"> 
 
       <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
 
       <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
 
       <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
 
       <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
 
       <li class="site-nav__item"><a href="#" class="site-nav__link">Link</a></li> 
 
      </ul> 
 
     </nav> 
 

 
    </header> 
 
    </div> 
 
</div>