JSスクロールでヘッダー要素を非表示にしてナビゲーションバーのサイズを変更

Question

3つのセクションに分割されたウェブサイトのヘッダーセクションが大きくなりました。ソーシャルリンク、ロゴ、ナビゲーションバーの順に表示されます。私はどのように私は上の2つの要素を非表示にすることができ、ナビゲーションバーのサイズを変更し、ユーザーがそれを過ぎてスクロールするときに固定して理解しようとしています。

現在、ナビゲーションバーには、実際のページナビゲーションをすべて保持する別のサイドメニューが開きます。 https://css-tricks.com/scroll-fix-content/ をそして、あなたのコードで動作：

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

あなたはあなたの必要性のために、このきちんとした例を見ることができます。

これはCSSとJSの組み合わせで、最も簡単な解決策は です。