Question

任何人都可以通过我目前正在做的小型响应式网络项目来帮助我吗？

我想在用户位于页面的最顶部时隐藏菜单导航栏，并且仅在用户开始向下滚动时显示（在移动版本上），但不知道如何，下面是我的代码段（主要基于W3school模板，因为我正在尝试学习网页制作，这是我迄今为止发现的最可靠的来源）：

＆＃13;

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

＆＃13;

非常感谢任何帮助，非常感谢！

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

你必须检测用户何时滚动，如果没有滚动添加类隐藏，如果滚动删除类隐藏。

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

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

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

css

.hidden {
  display: none;
}

如何在页面顶部隐藏导航栏

3 个答案: