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

📅  最后修改于: 2021-09-01 03:32:42             🧑  作者: Mango

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

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

  • 用于创建结构的 HTML 代码:
    
    
      
    
        
          
        
            How to Create Shrink Header on Scroll
            using HTML, CSS and JavaScript ?
        
    
      
    
        
        
      
        
        
                          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 代码:
    
    

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



  

    
      
    
        How to Create Shrink Header on Scroll
        using HTML, CSS and JavaScript ?
    
      
    

  

  
    
    
  
    
    
                      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.         

    
          

输出:
导航收缩