第一次使用網頁：如何隱藏 header？

Question

這是我第一次構建 web 站點，我不知道如何在向下滾動時強制隱藏 header。 我下載了一個很酷但很復雜的 web 站點的免費模板。 I know the basics of web design: I have the HTML file when I have the header calling the class main-header from the CSS styles and then, the javascript scripts are called at the end of the HTML script.

  <!-- Start Main Top -->
<header class="main-header">
    <!-- Start Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default bootsnav">
        <div class="container">
            <!-- Start Header Navigation -->
            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-bars"></i>
            </button>
                <a class="navbar-brand" href="index.html"><img src="images/logo.png" class="logo" alt=""></a>
            </div>
            <!-- End Header Navigation -->

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-menu">
                <ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp">
                    <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="about.html"> About Us</a></li>
                    <li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
                    <li class="nav-item"><a class="nav-link" href="contact-us.html">Contact Us</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->

            <!-- Start Atribute Navigation -->
            <div class="attr-nav">
                <ul>
                    <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
                </ul>
            </div>
            <!-- End Atribute Navigation -->
        </div>
    </nav>
    <!-- End Navigation -->
</header>

我在 HTML 文件上使用該代碼，然后，我創建了以下 JS 腳本來隱藏 header：

    /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("header").style.top = "0";
    } else {
        document.getElementById("header").style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;

與 header 相關的代碼的 style.css 部分是：

    .main-header.fixed-menu {
     position: fixed;
     visibility: hidden;
     left: 0px;
     top: 0px;
     width: 100%;
     padding: 0px 0px;
     background: #ffffff;
     z-index: 0;
     transition: all 500ms ease;
     -moz-transition: all 500ms ease;
     -webkit-transition: all 500ms ease;
     -ms-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     z-index: 999;
     opacity: 1;
     visibility: visible;
     -ms-animation-name: fadeInDown;
     -moz-animation-name: fadeInDown;
     -op-animation-name: fadeInDown;
     -webkit-animation-name: fadeInDown;
     animation-name: fadeInDown;
     -ms-animation-duration: 500ms;
     -moz-animation-duration: 500ms;
     -op-animation-duration: 500ms;
     -webkit-animation-duration: 500ms;
     animation-duration: 500ms;
     -ms-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
     -op-animation-timing-function: linear;
     -webkit-animation-timing-function: linear;
     animation-timing-function: linear;
     -ms-animation-iteration-count: 1;
     -moz-animation-iteration-count: 1;
     -op-animation-iteration-count: 1;
     -webkit-animation-iteration-count: 1;
     animation-iteration-count: 1;
}
 .main-header.fixed-menu {
     padding: 0px;
     box-shadow: 0 0 8px 0 rgba(0,0,0,.12);
     border-radius: 0;
}

我真的不知道問題出在哪里，或者代碼是否有任何問題。 我不精通 HTML 和 web 設計，所以我需要你的幫助：:)

謝謝！

Answer 1

正如s.kuznetsov建議的那樣，您缺少一些東西：

1. 在<header class="main-header">你缺少id="header"和第二個 class fixed-menu ，所以正確的結果是<header id="header" class="main-header fixed-menu">

2. 由於頁面內容不超過您用於測試滾動事件的 window 不會發生，因此您需要像<body></body>一樣將內容添加到 html 並在 ZC7A628CBA22E28EB17B5F5C6AE2A26 高度中分配body { height: 200vh; background-color: black;} body { height: 200vh; background-color: black;}

3. 除此之外我會修改js
   從document.getElementById("header").style.top = "-50px";
   到document.getElementById("header").style.top = "-100%";

 /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */ var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("header").style.top = "0"; } else { document.getElementById("header").style.top = "-100%"; } prevScrollpos = currentScrollPos; }

 .main-header.fixed-menu { position: fixed; visibility: hidden; left: 0px; top: 0px; width: 100%; padding: 0px 0px; background: #ffffff; z-index: 0; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; z-index: 999; opacity: 1; visibility: visible; -ms-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -op-animation-name: fadeInDown; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -ms-animation-duration: 500ms; -moz-animation-duration: 500ms; -op-animation-duration: 500ms; -webkit-animation-duration: 500ms; animation-duration: 500ms; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; -op-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; -ms-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -op-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }.main-header.fixed-menu { padding: 0px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12); border-radius: 0; } body { height: 200vh; background-color: black; }

 <.-- Start Main Top --> <header id="header" class="main-header fixed-menu"> <.-- Start Navigation --> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default bootsnav"> <div class="container"> <,-- Start Header Navigation --> <div class="navbar-header"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="index,html"><img src="images/logo.png" class="logo" alt=""></a> </div> <.-- End Header Navigation --> <.-- Collect the nav links. forms. and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp"> <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> <li class="nav-item"><a class="nav-link" href="about.html"> About Us</a></li> <li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li> <li class="nav-item"><a class="nav-link" href="contact-us.html">Contact Us</a></li> </ul> </div> <!-- /.navbar-collapse --> <!-- Start Atribute Navigation --> <div class="attr-nav"> <ul> <li class="search"><a href="#"><i class="fa fa-search"></i></a></li> </ul> </div> <!-- End Atribute Navigation --> </div> </nav> <!-- End Navigation --> </header> <body> </body>