如何隱藏頁面頂部的導航欄

任何人都可以幫我解決一個小型的響應式Web項目我目前正在做什麼？如何隱藏頁面頂部的導航欄

我想在用戶位於頁面的最頂部時隱藏菜單導航欄，並且只在用戶開始向下滾動時顯示（在移動版本上），但不知道如何在下面是我的代碼段（主要是基於W3school模板，因爲我想學習網頁製作，它是最可靠的來源，到目前爲止我發現）：

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

我真的很感謝任何幫助，非常感謝！

來源

2016-12-25 Raymond Chen

始終使用：

.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的，你最終會這樣。

來源

2016-12-25 15:49:19

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;

在頁面加載，或者如果用戶滾動，檢查用戶向下滾動...

來源

2016-12-25 15:50:25

你要檢測用戶何時滾動與否，如果不滾動添加類隱藏的，如果滾動刪除隱藏課程。

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

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

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

的CSS

.hidden { 
    display: none; 
}

來源

2016-12-25 15:53:08

如何隱藏頁面頂部的導航欄

回答

相關問題