CSS 如何在滚动页面时更改不透明度

在本文中，我们将深入研究根据用户滚动活动修改HTML元素透明度的复杂性。这种技术可以为您的网站引入一个更具动态性的层次，并且只需要使用最少的JavaScript或jQuery和CSS即可轻松完成。完成本指南后，您将全面了解如何执行此效果，并具备将其调整到符合您要求的技能。所以，让我们深入了解如何在浏览页面时调整透明度！

方法

我们将看到不同的方法来在滚动页面时改变不透明度。它们将如下所示−

使用JavaScript
使用jQuery

方法1：使用JavaScript

我们将采取以下措施来在滚动过程中修改元素的透明度−

定义要影响的元素 - 首先，我们将确定要修改透明度的HTML组件，并为其分配一个可以在JavaScript中选择它的标识符。
为元素添加样式 - 我们将使用CSS来装饰该元素，并固定其位置。这确保了在用户滚动时，元素将保持在显示屏上的固定位置。
添加事件监听器 - 我们将继续使用JavaScript向窗口对象的“scroll”事件添加事件监听器。随后，每当用户滚动网页时，该函数将被执行。
计算当前滚动位置 - 在函数内部，我们将使用pageYOffset属性或document.documentElement.scrollTop属性来计算页面的当前滚动位置。
更新透明度 - 使用JavaScript，我们将根据当前滚动位置设置所选元素的style.opacity属性。我们将使用一个简单的公式来确定透明度，如1 – scrollTop / 500。

示例

下面的代码块构建了一个网页，其中包含一个标头部分，当用户向下滚动时 gradually become less transparent逐渐变得不透明。该代码通过使用HTML、CSS和JavaScript的一系列方法来实现这个效果。标头部分固定在页面顶部，具有黑色背景和白色文字颜色。该代码还包含一些文本内容，每个内容块之间通过几个换行符进行分隔，以创建一个大的空白空间。

为了在滚动时改变标头区域的透明度，代码在JavaScript中使用了一个滚动事件监听器来监控用户在网页上的位置。当用户向下滚动时，代码计算用户滚动的程度，并相应地修改标头的透明度。随着用户向下滚动网页，标头逐渐失去其透明度，最终完全消失，从而产生一个视觉冲击的效果，将用户的注意力引向网页的内容。

<!DOCTYPE html>
<html>
<head>
   <title>How to change opacity while scrolling the page?</title>
   <style>
      #content {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         background-color: #000;
         color: #fff;
         padding: 10px;
      }
      h4 {
         margin-top: 100px;
      }
   </style>
</head>
<body>
   <div id="content">
      <p>Header content</p>
   </div>
   <h4>How to change opacity while scrolling the page?</h4>
   <p>Some content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <script>
      window.addEventListener("scroll", function () {
         let header = document.getElementById("content");
         let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
         header.style.opacity = 1 - scrollTop / 500;
      });
   </script>
</body>
</html>

现在让我们解剖并理解这段代码。这段代码由三个部分组成

<body> 元素
<style> 元素
<script> 元素

方法2：使用jQuery

使用jQuery实现该任务的方法与使用JavaScript的方法相同。然而，我们将使用jQuery提供的方法和对象，例如 $(window)，$ (window).scrollTop() 来完成相同的任务。

示例

在以下示例中，<body> 代码设置了一个网站，其中包含一个带有内容的页眉和一些其他内容。页眉的ID设置为”content”，并使用CSS进行样式设置，具有黑色背景和白色文本。内容通过使用换行符进行排列，以增加整个页面的高度。

<script>代码建立了一个事件监听器，监视用户在页面上的滚动位置。当用户滚动时，使用jQuery库改变页眉的不透明度，随着用户向下滚动，逐渐减小不透明度。这产生了一种充满活力的效果，当用户滚动时，页眉似乎越来越透明，为网站增加了响应性的组成部分。

通过利用各种HTML、CSS和JavaScript方法，包括对页眉进行固定布局，指定页眉的背景和文本颜色，并制定滚动事件监听器以跟踪用户在页面上的位置，实现了累积效果。通过结合这些方法，该脚本构建了一个视觉上令人愉悦且交互性强的网站。

<!DOCTYPE html>
<html>
<head>
   <title>How to change opacity while scrolling the page?</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      #content {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         background-color: #000;
         color: #fff;
         padding: 10px;
      }
      h4 {
         margin-top: 100px;
      }
   </style>
</head>
<body>
   <div id="content">
   <p>Header content</p>
   </div>
   <h4>How to change opacity while scrolling the page?</h4>
   <p>Some content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <br />
   <br />
   <p>Some more content</p>
   <script>
       $(window).scroll(function () { let content =$ ("#content");
         let scrollTop = $(window).scrollTop();
         content.css("opacity", 1 - scrollTop / 500);
      });
   </script>
</body>
</html>

结论

总而言之，根据页面滚动的位置调整Web元素的透明度是一种简单而强大的方法，可以增强您的网站动态性。通过使用JavaScript或jQuery以及CSS，很容易设计一个函数，根据当前滚动位置改变元素的透明度。无论您是想逐渐展示标题还是轻微调整页面上其他元素的透明度，这种方法都是一种灵活的工具，可以为您的网站注入更多的互动性。我相信这篇文章已经给您传授了如何在滚动时修改透明度的全面理解，并且您将利用这些知识创作出一些非常令人惊叹的网页。