如何使用 HTML、CSS 和 JavaScript 在滚动上创建收缩标题？

当用户向下滚动页面时，收缩导航栏会起作用。在本文中，我们将使用 HTML、CSS 和 JavaScript 来设计缩小导航栏。 HTML 用于创建结构，CSS 用于设置 HTML 结构上的样式以使其看起来更好。这种缩小的导航栏在网站上看起来很有吸引力。通过使用 JavaScript，您可以轻松地使导航栏在用户向下滚动时收缩。

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

• 用于创建结构的 HTML 代码：

  
  
    
  
      
        
      
  
    
  
      
      
  
          
              GeeksforGeeks
          
        
          
  
              Home
              Our Products
              Careers
              Contact US
              About US
          
      
    
      
      
  
           
              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.
          
      
  
    
  
  

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

• 在 HTML 结构上添加样式的 CSS 代码：

• 菜单动画的 JavaScript 代码：

        
      // Scrolls down 90px from the top of
      // the document, to resize the navlist
      // padding and the title font-size
      window.onscroll = function() {
          scrollFunction()
      };
            
      function scrollFunction() {
          if (document.body.scrollTop > 90 ||
              document.documentElement.scrollTop > 90)
          {
              document.getElementById("navlist")
                          .style.padding = "25px 10px";
                    
              document.getElementById("logo")
                      .style.fontSize = "24px";
          } 
          else {
              document.getElementById("navlist")
                          .style.padding = "90px 10px";
                            
              document.getElementById("logo")
                          .style.fontSize = "35px";
          }
      }

示例：在这个示例中，我们将结合 HTML、CSS 和 JavaScript 代码来制作缩小标题导航栏。

  

    
      
    
        How to Create Shrink Header on Scroll
        using HTML, CSS and JavaScript ?
    
      
    
        * {
            box-sizing: border-box;
        }
      
        body { 
            margin: 0;
        }
      
        /* Navlist designing */
        #navlist {
            overflow: hidden;
            background-color: #0074D9;
            padding: 90px 10px;
            transition: 0.4s;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1;
        }
      
        #navlist a {
            float: left;
            color: white;
            text-align: center;
            padding: 12px;
            text-decoration: none;
            font-size: 18px; 
            line-height: 25px;
            border-radius: 4px;
        }
      
        #navlist #logo {
            font-size: 35px;
            font-weight: bold;
            transition: 0.4s;
        }
      
        #navlist a:hover {
            color: #01FE06;
        }
      
        #navlist-right {
            float: right;
        }
          
        /* Content desing */
        .content {
            margin-top:220px;
            padding:15px 15px 1800px;
            font-size:22px;
        }
    

  

  
    
    
        
            GeeksforGeeks
        
      
        
            Home
            Our Products
            Careers
            Contact US
            About US
        
    
  
    
    
         
            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.
        
    
  
    
      
        // Scrolls down 90px from the top of
        // the document, to resize the navlist
        // padding and the title font-size
        window.onscroll = function() {
            scrollFunction()
        };
          
        function scrollFunction() {
            if (document.body.scrollTop > 90 ||
                document.documentElement.scrollTop > 90)
            {
                document.getElementById("navlist")
                            .style.padding = "25px 10px";
                  
                document.getElementById("logo")
                            .style.fontSize = "24px";
            } 
            else {
                document.getElementById("navlist")
                            .style.padding = "90px 10px";
                              
                document.getElementById("logo")
                            .style.fontSize = "35px";
            }
        }
    

  

输出：