通过HTML、CSS和JavaScript滚动时展开导航栏

创建一个下滑导航栏，您需要使用HTML、CSS和JavaScript。HTML将制作页面的结构，CSS将使其美观。这种滑动导航栏在网站上非常吸引人。通过使用JavaScript，您可以在用户向下滚动时轻松使导航栏可滑动。

创建结构： 在该部分中，我们将为滑动导航栏创建一个基本的网站结构，当用户向下滚动页面时，它将显示效果。

制作结构的HTML代码：

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Slide Down a Navigation Bar on Scroll
        using HTML CSS and JavaScript
    </title>
     
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
</head>
 
<body>
     
    <!-- logo with tag -->
    <article>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
         
        <b>
            A Computer Science
            Portal for Geeks
        </b>
         
         
<p>
            How many times were you frustrated while
            looking out for a good collection of
            programming/algorithm/interview questions?
            What did you expect and what did you get?
            This portal has been created to provide
            well written, well thought and well
            explained solutions for selected questions.
        </p>
 
    </article>
     
    <!-- Navbar items -->
    <div id="navlist">
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Our Products</a>
        <a href="#">Careers</a>
        <a href="#">Contact Us</a>
    </div>
 
    <!-- for creating scroll -->
    <div class="scrollable"
        style="padding:15px 15px 4500px;">
    </div>
</body>
 
</html>

设计结构：

在前一节中，我们已经创建了基本网站的结构。在本节中，我们将设计导航栏的结构，然后使用JavaScript实现导航栏的滚动效果。

CSS代码优化结构外观：

<style>
      
    /* styling article tag component */
    article {
        position: fixed;
        margin-left: 10px;
    }
          
    /* styling navlist */
    #navlist {
        background-color: #0074D9;
        position: fixed;
        left: 45%;
        top: -60px;
        width: auto;
        display: block;
        transition: top 0.3s;
    }
          
    /* styling navlist anchor element */
    #navlist a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 12px;
        text-decoration: none;
        font-size: 15px;
    }
          
    /* hover effect of navlist anchor element */
    #navlist a:hover {
        background-color: #ddd;
        color: black;
    }
</style>

菜单上动画的JavaScript代码：

<script>
    
    // When the user scrolls down then
    // slide down the navbar
    window.onscroll = function() {
        scroll()
    };
  
    function scroll() {
        if (document.body.scrollTop > 20 ||
                document.documentElement.scrollTop > 20) {
            document.getElementById("navlist").style.top = "0";
        }
        else {
            document.getElementById("navlist").style.top
                    = "-60px";
        }
    }
</script>

将HTML、CSS和JavaScript代码结合起来： 这个示例是以上部分的组合。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Slide Down a Navigation Bar on Scroll
        using HTML CSS and JavaScript
    </title>
     
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
     
    <style>
     
        /* styling article tag component */
        article {
            position: fixed;
            margin-left: 10px;
        }
         
        /* styling navlist */
        #navlist {
            background-color: #0074D9;
            position: fixed;
            left: 45%;
            top: -60px;
            width: auto;
            display: block;
            transition: top 0.3s;
        }
         
        /* styling navlist anchor element */
        #navlist a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 15px;
        }
         
        /* hover effect of navlist anchor element */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
 
<body>
     
    <!-- logo with tag -->
    <article>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
         
        <b>
            A Computer Science 
            Portal for Geeks
        </b>
         
         
<p>
            How many times were you frustrated while
            looking out for a good collection of
            programming/algorithm/interview questions?
            What did you expect and what did you get?
            This portal has been created to provide
            well written, well thought and well
            explained solutions for selected questions.
        </p>
 
    </article>
     
    <!-- Navbar items -->
    <div id="navlist">
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Our Products</a>
        <a href="#">Careers</a>
        <a href="#">Contact Us</a>
    </div>
 
    <!-- for creating scroll -->
    <div class="scrollable"
        style="padding:15px 15px 4500px;">
    </div>
 
    <script>
     
        // When the user scrolls down then
        // slide down the navbar
        window.onscroll = function() {
            scroll()
        };
 
        function scroll() {
            if (document.body.scrollTop > 20 || 
                    document.documentElement.scrollTop > 20)
            {
                document.getElementById("navlist").style.top
                            = "0";
            }
            else {
                document.getElementById("navlist").style.top
                            = "-60px";
            }
        }
    </script>
</body>
 
</html>