JS实现随页面滚动显示/隐藏窗口固定位置元素

下面是JS实现随页面滚动显示/隐藏窗口固定位置元素的完整攻略：

确定需要固定位置的元素

首先需要确定页面中需要固定位置的元素，比如导航栏、侧边栏等。在这个元素的父元素外面再包裹一层 div，这个 div 的高度可以设置为与需要固定位置的元素一样高。需要固定位置的元素与这个 wrapper div 的位置相对固定。

获取需要固定位置的元素的位置信息

通过 JS 中的 offsetTop 获取需要固定位置的元素距离顶部的距离，以及该元素的高度，用来在后面计算该元素固定位置时的位置信息。

const fixedElement = document.getElementById('fixed-element');
// 获取元素距离顶部的距离
const fixedElementTop = fixedElement.offsetTop;
// 获取元素的高度
const fixedElementHeight = fixedElement.offsetHeight;

监听页面滚动事件

接下来需要监听页面滚动事件，当页面滚动到固定位置时，将元素固定在指定位置。

window.addEventListener('scroll', () => {
  // 当页面滚动到固定位置时，将元素固定在指定位置
  if (window.pageYOffset >= fixedElementTop) {
    fixedElement.style.position = 'fixed';
    fixedElement.style.top = 0;
  } else {
    // 恢复元素的默认位置
    fixedElement.style.position = 'relative';
    fixedElement.style.top = 'auto';
  }
});

改善固定位置元素的体验

如果直接将元素固定在页面顶部，可能会遮挡部分页面内容，不太友好。所以需要在固定位置元素的下方添加一个 placeholder，占据原先元素的位置，使得用户可以继续浏览页面。

// 创建一个占位元素
const placeholder = document.createElement('div');
// 设置占位元素的高度，以确保不遮挡页面内容
placeholder.style.height = `${fixedElementHeight}px`;
// 将占位元素添加到需要固定位置元素的下方
fixedElement.parentNode.insertBefore(placeholder, fixedElement.nextSibling);

完整示例

下面是一个完整的示例，实现了让 id 为 fixed-element 的元素随页面滚动显示/隐藏：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fixed Element Demo</title>
    <style>
      .wrapper {
        height: 1000px;
      }
      #fixed-element {
        background-color: #fff;
        border: 1px solid #000;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div id="fixed-element">
        Fixed Element
      </div>
    </div>
    <script>
      const fixedElement = document.getElementById('fixed-element');
      const fixedElementTop = fixedElement.offsetTop;
      const fixedElementHeight = fixedElement.offsetHeight;

      // 创建一个占位元素
      const placeholder = document.createElement('div');
      placeholder.style.height = `${fixedElementHeight}px`;
      fixedElement.parentNode.insertBefore(placeholder, fixedElement.nextSibling);

      window.addEventListener('scroll', () => {
        if (window.pageYOffset >= fixedElementTop) {
          fixedElement.style.position = 'fixed';
          fixedElement.style.top = 0;
        } else {
          fixedElement.style.position = 'relative';
          fixedElement.style.top = 'auto';
        }
      });
    </script>
  </body>
</html>

示例说明

在上面的示例中，我们创建了一个高度为 1000px 的 wrapper div，其中包含了一个 id 为 fixed-element 的 div，这个 div 就是我们需要固定位置的元素。

在 JS 中，我们通过 document.getElementById('fixed-element') 获取到需要固定位置的元素，通过 offsetTop 和 offsetHeight 分别获取该元素距离文档顶部的距离和该元素的高度。然后创建了一个占位元素，占据了需要固定位置的元素的位置。

最后，我们监听了页面滚动事件，当页面滚动到固定位置时，将需要固定位置的元素设置为固定位置，同时将占位元素插入到前一个兄弟节点的后面，占据该元素的位置。当用户滚动页面时，该元素始终固定在页面上方，并且不会遮挡页面下方的内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现随页面滚动显示/隐藏窗口固定位置元素 - Python技术站