如何使用 CSS 和 JavaScript 在滚动时调整导航栏大小？

本文将讨论如何使用 CSS 和 JavaScript 在滚动时调整导航栏大小。

导航栏包含网站中存在的元素列表；包括浏览网站的链接。它通常是访问者访问网站时的第一个停靠点，他们寻求指导以浏览网站。

调整大小与隐藏和显示导航相同。在这里，我们只需要使用 JavaScript 增加导航栏的填充和大小。

在这个示例中，我们正在创建一个显示“导航栏”的网页。一个包含 4 个选项的菜单进入当前页面。

Example.html

创建一个HTML文件，在其中我们将定义页面的结构（视图）。在这个例子中，使用 HTML 代码，我们正在创建当前页面，其中包含所需的文本、导航栏和菜单的空导航链接。

<body>
   <!-- HTML CODE -->
   <div id="navbar">
      <a href="#default" id="logo">€€§§±</a>
      <div id="navbar-right">
         <a class="active" href="#home">Home</a>
         <a href="#contact">Contact</a>
         <a href="#about">About</a>
      </div>
   </div>
   <div style="margin-top:150px;padding:15px 15px 2500px;font-size:30px; font-family: Verdana, Geneva, Tahoma, sans-serif;">
      <p class="para"><b>This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.</b></p>
      <p class="para">to show the effect scroll down and remove the effect scroll up.</p>
   </div>

Example.css

添加 css 样式以在可滑动导航栏上提供背景和悬停效果，以获得更好的外观。在这个示例中，我们正在设置导航栏链接的样式，如果我们悬停在链接上，背景颜色将发生变化，并且还在首页链接上添加了活动类。

<style>
   /*styling*/
   
   * {
      box-sizing: border-box;
   }
   
   body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
   }
   
   #navbar {
      overflow: hidden;
      background-color: #5f5151;
      padding: 50px 10px;
      transition: 0.5s;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1;
   }
   
   #navbar a {
      float: left;
      color: black;
      text-align: center;
      padding: 12px;
      text-decoration: none;
      font-size: 15px;
      line-height: 25px;
      border-radius: 4px;
   }
   
   #navbar #logo {
      font-size: 35px;
      font-weight: bold;
      transition: 0.4s;
      color: white;
   }
   
   #navbar a:hover {
      background-color: rgb(94, 250, 211);
      color: black;
   }
   
   #navbar a.active {
      background-color: rgb(31, 214, 150);
      color: rgb(11, 10, 10);
   }
   
   #navbar-right {
      float: right;
   }
   
   @media screen and (max-width: 580px) {
      #navbar {
         padding: 10px 10px;
      }
      #navbar a {
         float: left;
         display: block;
         text-align: left;
      }
      #navbar-right {
         float: right;
      }
      .para {
         font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         font-size: small;
      }
   }
</style>

Example.js

在这个示例中，我们正在添加滚动效果，如果页面滚动超过或等于 80，则导航栏将变小，并且内容将从页面中隐藏。

观察以下javascript代码以更好地理解。

<script>
   // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
   window.onscroll = function() {
      scrollFunction()
   };

   function scrollFunction() {
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
         document.getElementById("navbar").style.padding = "10px 10px";
         document.getElementById("logo").style.fontSize = "20px";
      } else {
         document.getElementById("navbar").style.padding = "30px 10px";
         document.getElementById("logo").style.fontSize = "30px";
      }
   }
</script>

完整示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
   /*styling*/

   * {
      box-sizing: border-box;
   }

   body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
   }

   #navbar {
      overflow: hidden;
      background-color: #5f5151;
      padding: 50px 10px;
      transition: 0.5s;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1;
   }

   #navbar a {
      float: left;
      color: black;
      text-align: center;
      padding: 12px;
      text-decoration: none;
      font-size: 15px;
      line-height: 25px;
      border-radius: 4px;
   }

   #navbar #logo {
      font-size: 35px;
      font-weight: bold;
      transition: 0.4s;
      color: white;
   }

   #navbar a:hover {
      background-color: rgb(94, 250, 211);
      color: black;
   }

   #navbar a.active {
      background-color: rgb(31, 214, 150);
      color: rgb(11, 10, 10);
   }

   #navbar-right {
      float: right;
   }

   @media screen and (max-width: 580px) {
      #navbar {
         padding: 10px 10px;
      }
      #navbar a {
         float: left;
         display: block;
         text-align: left;
      }
      #navbar-right {
         float: right;
      }
      .para {
         font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         font-size: small;
      }
   }
   </style>
</head>
<body>
   <!-- HTML CODE -->
   <div id="navbar">
      <a href="#default" id="logo">€€§§±</a>
      <div id="navbar-right">
         <a class="active" href="#home">Home</a>
         <a href="#contact">Contact</a>
         <a href="#about">About</a>
      </div>
   </div>
   <div style="margin-top:150px;padding:15px 15px 2500px;font-size:30px; font-family: Verdana, Geneva, Tahoma, sans-serif;">
      <p class="para"><b>This example demonstrates how to shrink a navigation bar when the user starts to scroll the page.</b></p>
      <p class="para">to show the effect scroll down and remove the effect scroll up.</p>
   </div>
   <script>
   // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
   window.onscroll = function() {
      scrollFunction()
   };

   function scrollFunction() {
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
         document.getElementById("navbar").style.padding = "10px 10px";
         document.getElementById("logo").style.fontSize = "20px";
      } else {
         document.getElementById("navbar").style.padding = "30px 10px";
         document.getElementById("logo").style.fontSize = "30px";
      }
   }
   </script>
</body>
</html>

更新于： 2022-12-19

3K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告