如何使用CSS和JavaScript在向下滾動時隱藏導航選單？

要使用CSS和JavaScript在向下滾動時隱藏導航選單，使用者應該具備Javascript 條件語句和CSS的基礎知識。我們將使用HTML建立導航選單，使用CSS設定導航選單的樣式，並使用Javascript在向下滾動時隱藏導航選單。

我們有一個帶有文字內容的導航選單，我們的任務是在向下滾動時隱藏導航選單。在這篇文章中，我們將實現以下步驟，以使用CSS和JavaScript在向下滾動時隱藏導航選單

使用HTML建立導航選單的結構

  • 我們在HTML程式碼中使用了兩個div標籤和四個錨標籤。
  • 帶有class nav的div元素建立了導航選單的結構，其中包含使用錨標籤建立的四個選項。
  • 帶有class para的div元素編寫HTML內容，向下滾動時將隱藏導航選單。

以下是上述步驟的HTML實現

<div id="nav">
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">Tutorix</a>
<a href="#">Contact</a>
</div>
<div class="para">
    <p>
        CSS is the language used to design the web
        pages or specifying the presentation of a
        document written in a markup language like
        HTML.
    </p>
    <p>
        CSS helps web developers to control 
        the layout and other visual aspects of 
        the web pages.
    </p>
    <p>
        CSS stands for Cascading Style 
        Sheets, it is a simple design language 
        intended to simplify the process of making 
        web pages presentable using CSS properties.
    </p>
    <p>
        CSS specify how an HTML element should be
        displayed on the web page. If you think of
        the human body as a web page then CSS is
        styling part of the body. Like color of
        the eyes, size of the nose, skin tone, etc.
    </p>
    <p>
        This CSS tutorial is designed for aspiring 
        Web Designers and Developers from basics 
        to advance. CSS knowledge is must whoever 
        wants to be a web developer, there are a 
        lot of CSS frameworks like Bootstrap, 
        Tailwind CSS, etc. But having CSS knowledge 
        is must as a web developer.
    </p>
</div>

使用CSS設定導航選單的樣式

  • 我們使用了nav ID來設計導航選單，它將背景顏色設定為綠色，使用position和top屬性將導航選單固定在頂部，並在隱藏和顯示導航選單時新增過渡。
  • 我們使用了#nav a選擇器，它選擇導航選單選項並設定其字體系列，我們使用了float屬性，它從左側水平排列選單選項，設定填充和字型大小。
  • 將滑鼠懸停在導航選單選項上時，我們將其文字裝飾設定為下劃線。
  • 最後，我們為書面內容設定了頂部邊距、填充、字型大小和高度。

以下是上述步驟的CSS實現

#nav {
    background-color: #04af2f;
    position: fixed;
    top: 0;
    width: 100%;
    display: block;
    transition: top 0.3s;
}
#nav a {
    font-family: Verdana, sans-serif;
    float: left;
    display: block;
    color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
}
#nav a:hover {
    text-decoration: underline;
}
.para {
    padding: 15px;
    margin-top: 30px;
    height: 1600px;
    font-size: 20px;
}

使用JavaScript隱藏導航選單

  • 我們使用了兩個變數 prevState 和 currentState，其中 prevState 是當前垂直滾動位置，currentState 在使用者滾動時更新。
  • 我們使用了在滾動時執行的事件處理程式。
  • 我們使用了簡單的if-else條件語句，其中prevState > currentState表示向上滾動，prevState < currentState表示向下滾動。
  • 向上滾動時，導航選單使用top:0;設定在頂部，向下滾動時，導航選單使用CSS top屬性設定為負值，從而隱藏導航選單。

以下是上述步驟的實現

let prevState = window.pageYOffset;
window.onscroll = function () {
    let currentState = window.pageYOffset;
    if (prevState > currentState) {
        document.getElementById("nav").
            style.top = "0";
    } 
    else {
        document.getElementById("nav").
            style.top = "-50px";
    }
    prevState = currentState;
}

完整示例程式碼

以下是使用CSS和JavaScript在向下滾動時隱藏導航選單的完整示例程式碼。

<!DOCTYPE html>
<html>
<head>
    <title>
        To hide a navigation menu on scroll 
        down with CSS and JavaScript
    </title>
    <style>
        #nav {
            background-color: #04af2f;
            position: fixed;
            top: 0;
            width: 100%;
            display: block;
            transition: top 0.3s;
        }
        #nav a {
            font-family: Verdana, sans-serif;
            float: left;
            display: block;
            color: #f2f2f2;
            padding: 10px;
            font-size: 16px;
            text-decoration: none;
        }
        #nav a:hover {
            text-decoration: underline;
        }
        .para {
            padding: 15px;
            margin-top: 30px;
            height: 1600px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="nav">
        <a href="#">Home</a>
        <a href="#">Tutorials</a>
        <a href="#">Tutorix</a>
        <a href="#">Contact</a>
    </div>
    <div class="para">
        <p>
            CSS is the language used to design the web
            pages or specifying the presentation of a
            document written in a markup language like
            HTML.
        </p>
        <p>
            CSS helps web developers to control 
            the layout and other visual aspects of 
            the web pages.
        </p>
        <p>
            CSS stands for Cascading Style 
            Sheets, it is a simple design language 
            intended to simplify the process of making 
            web pages presentable using CSS properties.
        </p>
        <p>
            CSS specify how an HTML element should be
            displayed on the web page. If you think of
            the human body as a web page then CSS is
            styling part of the body. Like color of
            the eyes, size of the nose, skin tone, etc.
        </p>
        <p>
            This CSS tutorial is designed for aspiring 
            Web Designers and Developers from basics 
            to advance. CSS knowledge is must whoever 
            wants to be a web developer, there are a 
            lot of CSS frameworks like Bootstrap, 
            Tailwind CSS, etc. But having CSS knowledge 
            is must as a web developer.
        </p>
    </div>
    <script>
        let prevState = window.pageYOffset;
        window.onscroll = function () {
            let currentState = window.pageYOffset;
            if (prevState > currentState) {
                document.getElementById("nav").
                    style.top = "0";
            } else {
                document.getElementById("nav").
                    style.top = "-50px";
            }
            prevState = currentState;
        }
    </script>
</body>
</html>

結論

在這篇文章中，我們學習並理解了如何使用CSS和JavaScript在向下滾動時隱藏導航選單。我們使用HTML和CSS建立和設定導航選單的樣式，同時使用JavaScript新增滾動事件監聽器，該監聽器在向下滾動時隱藏導航選單，並在向上滾動時重新顯示。

更新於：2024年8月19日

5000+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告