ページ上部にあるときにナビゲーションバーを非表示にするには

Question

私が現在やっている反応の速いウェブプロジェクトで誰かが助けてくれますか？

ユーザーがページの最上部にいるときにメニューのナビゲーションバーを非表示にし、ユーザーがスクロールダウン（モバイル版）を開始したときにのみ表示しますが、

<!-- Navbar --> 
 
     <div class="w3-top"> 
 
     <ul class="w3-navbar w3-sea-green w3-card-2 w3-left-align"> 
 
      <li class="w3-hide-medium w3-hide-large w3-opennav w3-right"> 
 
      <a class="w3-padding-large" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> 
 
      </li> 
 
      <li><a href="#" class="w3-hover-none w3-hover-text-sea-green-grey w3-padding-large">HOME</a></li> 
 
      <li class="w3-hide-small"><a href="#download" class="w3-padding-large w3-hover-text-sea-green-invert">DOWNLOAD</a></li> 
 
      <li class="w3-hide-small"><a href="#about" class="w3-padding-large w3-hover-text-sea-green-invert">ABOUT</a></li> 
 
      <li class="w3-hide-small"><a href="#contact" class="w3-padding-large w3-hover-text-sea-green-invert">CONTACT</a></li> 
 
     </ul> 
 
     </div> 
 
    
 
     <!-- Navbar on small screens --> 
 
     <div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px"> 
 
      <ul class="w3-navbar w3-left-align w3-sea-green"> 
 
      <li><a class="w3-padding-large w3-hover-text-sea-green-invert" href="#download">DOWNLOAD</a></li> 
 
      <li><a class="w3-padding-large w3-hover-text-sea-green-invert" href="#about">ABOUT</a></li> 
 
      <li><a class="w3-padding-large w3-hover-text-sea-green-invert" href="#contact">CONTACT</a></li> 
 
      </ul> 
 
     </div> 
 
     
 
     <script> 
 
      // Used to toggle the menu on small screens when clicking on the menu button 
 
      function myFunction() { 
 
       var x = document.getElementById("navDemo"); 
 
       if (x.className.indexOf("w3-show") == -1) { 
 
        x.className += " w3-show"; 
 
       } else { 
 
        x.className = x.className.replace(" w3-show", ""); 
 
       } 
 
      } 
 

 
      // When the user clicks anywhere outside of the modal, close it 
 
      var modal = document.getElementById('ticketModal'); 
 
      window.onclick = function(event) { 
 
       if (event.target == modal) { 
 
       modal.style.display = "none"; 
 
       } 
 
      } 
 
     </script> 
 
     
 
     <!--Header image--> 
 
     <div class="mySlides w3-display-container w3-center"> 
 
      <img src="pics/header_img.png" style="width:100%; pointer-events:none;" draggable="false"> 
 
     </div>

アム本当に：私のコードセグメント（主に私は、Webページ作りを学ぶためにしようとしているようW3schoolテンプレートに基づいて、それは私がこれまでに見つかった最も信頼できる情報源である）があります助けを感謝し、多くのありがとう！

Answer 1

は常に使用：

.classList.add() // To add the class 
.classList.remove() // To remove the class 

これはあなたのコードになります：

function myFunction() { 
    var x = document.getElementById("navDemo"); 
    if (x.className.indexOf("w3-show") == -1) { 
     x.classList.add("w3-show"); 
    } else { 
     x.classList.remove("w3-show"); 
    } 
} 

そして最後に、W3Schoolsのに従うと、あなたはこのように終わるしないでください。ユーザーのスクロール、ページのロードオンまたは場合

Answer 2

function change(){ 
navbar=document.getElementsByClassName("w3-top")[0]; 
if(window.scrollTop>20){ 
//show 
navbar.style.display="block"; 
}else{ 
//hide 
navbar.style.display="none"; 
}} 
window.onload=window.onscroll=change; 

、ユーザーがスクロールダウンかどうかを確認...

Answer 3

あなたはときに、ユーザーのスクロールやないと隠されたクラスを追加スクロールとスクロール削除した場合でないかどうかを検出する必要がありますclass hidden。

$(window).scroll(function(){ 
      var scroll = $(window).scrollTop(); 

      if (scroll >=20) { 
       $('.w3-top').removeClass('hidden'); 

      } 
      else { 
       $('.w3-top').addClass('hidden'); 
      } 
     }); 

CSS

.hidden { 
    display: none; 
}