使用 HTML、CSS 和 JavaScript 在 Scroll 上向下滑动导航栏

要创建一个向下滑动的导航栏，您需要使用 HTML、CSS 和 JavaScript。 HTML 将使正文的结构，CSS 将使它看起来不错。这种滑动导航栏在网站上看起来很有吸引力。通过使用 JavaScript，您可以轻松地使导航栏在用户向下滚动时可滑动。

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

• 用于制作结构的 HTML 代码：

  
  
    
  
      
        
      
  
    
  
        
      
      
  
          
  
              GeeksforGeeks
          
            
          
              A Computer Science
              Portal for Geeks
          
            
          
  
              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.
          
      
        
      
      
  
          Home
          About Us
          Our Products
          Careers
          Contact Us
      
    
      
      
  
      
  
    
  
  

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

• 看起来不错的 CSS 代码结构：

• 菜单上动画的 JavaScript 代码：

       
      // 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";
          }
      }

组合 HTML、CSS 和 JavaScript 代码：此示例是上述部分的组合。

  

    
        Slide Down a Navigation Bar on Scroll
        using HTML CSS and JavaScript
    
      
    
      
    
      
        /* 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;
        }
    

  

      
    
    
        
            GeeksforGeeks
        
          
        
            A Computer Science 
            Portal for Geeks
        
          
        
            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.
        
    
      
    
    
        Home
        About Us
        Our Products
        Careers
        Contact Us
    
  
    
    
    
  
    
      
        // 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";
            }
        }
    

  

输出：