如何使用HTML、CSS和JavaScript创建滚动时收缩的标题栏

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

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

设计结构： 在CSS和JavaScript部分，我们将设计导航栏的结构，然后使用JavaScript在导航栏上实现滚动效果。

HTML代码

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport" content
        ="width=device-width, initial-scale=1"> 
      
    <title> 
        How to Create Shrink Header on Scroll 
        using HTML, CSS and JavaScript ? 
    </title> 
</head> 
  
<body> 
    <!-- Navlist of header -->
    <div id="navlist"> 
        <a href="#default" id="logo"> 
            GeeksforGeeks 
        </a> 
      
        <div id="navlist-right"> 
            <a href="#home">Home</a> 
            <a href="#about">Our Products</a> 
            <a href="#about">Careers</a> 
            <a href="#contact">Contact US</a> 
            <a href="#about">About US</a> 
        </div> 
    </div> 
  
    <!-- Page Content -->
    <div class="content"> 
        <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> 
    </div> 
</body> 
  
</html>

CSS代码

<style> 
    * { 
        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 design */
    .content { 
        margin-top:220px; 
        padding:15px 15px 1800px; 
        font-size:22px; 
    } 
</style>

Javascript代码

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

输出：

如何使用HTML、CSS和JavaScript创建滚动时收缩的标题栏