解决鼠标滚动时侧边栏固定于顶部的难题

2023-10-20 15:45:03

在开发网站的过程中，我们经常会遇到这样的需求：当页面滚动时，侧边栏固定在顶部。这里我们将学习使用 JavaScript 和 CSS 来实现这个功能。

思路

使用 JavaScript 来检测页面的滚动位置。
当页面滚动到一定位置时，使用 CSS 来将侧边栏固定在顶部。

实现步骤

在 HTML 代码中，将侧边栏包含在 <div> 标签中，并为其指定一个 ID，例如 <div id="sidebar">。
在 CSS 代码中，为侧边栏添加以下样式：

#sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #ffffff;
}

在 JavaScript 代码中，添加以下代码：

window.addEventListener("scroll", function() {
  var sidebar = document.getElementById("sidebar");
  var banner = document.getElementById("banner");
  if (window.pageYOffset > banner.offsetTop) {
    sidebar.style.position = "fixed";
    sidebar.style.top = "0";
  } else {
    sidebar.style.position = "absolute";
    sidebar.style.top = banner.offsetTop + "px";
  }
});

解释

window.addEventListener("scroll", function() {...})：这一行代码将一个事件监听器添加到窗口对象上，当页面滚动时，该事件监听器将被触发。
var sidebar = document.getElementById("sidebar");：这一行代码获取侧边栏元素。
var banner = document.getElementById("banner");：这一行代码获取横幅元素。
if (window.pageYOffset > banner.offsetTop) {...}：这一行代码检查页面是否已滚动到横幅元素的顶部。
sidebar.style.position = "fixed";：这一行代码将侧边栏的定位方式设置为固定。
sidebar.style.top = "0";：这一行代码将侧边栏的顶部位置设置为 0。
else {...}：这一行代码表示如果页面未滚动到横幅元素的顶部，则执行以下代码。
sidebar.style.position = "absolute";：这一行代码将侧边栏的定位方式设置为绝对。
sidebar.style.top = banner.offsetTop + "px";：这一行代码将侧边栏的顶部位置设置为横幅元素的顶部加上侧边栏的高度。