スクロールダウン時にナビを表示

Question

私が達成しようとしているのは、ページがスクロールダウンされてナビゲーションが隠されているときです。伝統的にそうであったように画面の上部から消えるためです。ユーザーがページをスクロールバックすると、ナビゲーションが再びビューにスライドします。同様に、もう一度スクロールすると、非表示になります。

私はこれに対していくつかの異なるプラグインを試してみましたが、ほとんど動作しています。私は現在で探しています一つは、「jqueryの-発表 - ナビゲーション」である

リンク：https://github.com/weaintplastic/jquery-unveiled-navigation 例：http://codepen.io/weaintplastic/full/RNpXOO/

これは非常に近く、私はそれが何をしたいん。スクリプトが「アクティブ」になると、いくつかのクラスで行うことができます。スクリプトが「アクティブ」のときに背景色だけを追加したいからです。したがって、ナビゲーションが画面を離れて一番上になくなるまで透明になります。

また、ナビゲーションを半分にして表示すると、このナビゲーションでわかります。ナビゲーションの半分はすぐに調整され、全体のバーが表示されます。しかし、私はあなたが上にスクロールしただけで、それを示すだけのアイデアが大好きです。したがって、ナビゲーションの高さが100pxで、スクロールして30pxにすると、バーの下の30pxしか表示されません。戻ってスクロールすると、ピクセル単位でバーが再び隠されます。これは意味がありますか？

（これは、それが明確になる場合）ので、手順は次のようになります。ページの上部に

1. ヘッダー、背景が透明。
2. ピクセル単位でスクロールすると、ナビゲーションが画面から離れます。
3. ユーザーがスクロールアップすると、ヘッダーが自己を再び表示し始めます。この時間は背景色です。
4. ヘッダーが再びブラウザの上部にヒットすると、背景が削除されます。

私のマークアップはかなりシンプルです。バーは、トグルがクリックされるまで、ナビゲーションが非表示になっているので、ロゴとナビゲーショントグルを保持します。トグルがクリックされると、ナビゲーションのフルスクリーンが表示されます。

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

私はそれ以外の場合は、コードの壁だろうpage-head__home-link以内に私が持っているSVGを削除しました！

ホープ誰かが助けることができます:)

Answer 1

あなたはjqueryのまたはライブラリなしでかなり簡単にこれを行うことができます。スクロールイベントを見るだけで、方向が変わったら視野のすぐ上にヘッダーを配置し、スクロールを続けると親コンテナの上部から離れないようにします。

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>