JavaScript实现电梯导航

页面加载（电梯导航显示与隐藏）

页面加载时，我们可以通过监听页面的load事件来执行一些初始化操作。例如，当页面完全加载后，我们可以初始化电梯导航的显示状态。

window.addEventListener("load", (event) => {
  // 页面加载完成后的初始化操作
  const elevator = document.querySelector('.elevator');
  const banner = document.querySelector('.banner');
  elevator.style.opacity = banner.offsetTop > 0 ? 1 : 0;
});

页面滚动（电梯导航与返回顶部功能）

页面滚动时，我们可以通过监听scroll事件来实现电梯导航的显示与隐藏，以及返回顶部的功能。

// 页面滚动到对应区域，电梯导航显示，否则隐藏
window.addEventListener('scroll', function () {
  const banner = document.querySelector('.banner');
  const elevator = document.querySelector('.elevator');
  const n = document.documentElement.scrollTop;
  elevator.style.opacity = n >= banner.offsetTop ? 1 : 0;
});

// 点击返回顶部
const backTop = document.querySelector('.elevator #backTop');
backTop.addEventListener('click', function () {
  window.scrollTo(0, 0);
});

页面缩放（电梯导航样式变化）

页面缩放可以通过监听resize事件来实现电梯导航样式的变化。例如，当页面缩放时，我们可以调整电梯导航的位置或样式。

window.addEventListener('resize', function () {
  // 根据页面缩放比例调整电梯导航的样式
  const elevator = document.querySelector('.elevator');
  // 假设我们根据窗口宽度调整电梯导航的位置
  elevator.style.left = `${window.innerWidth / 2}px`;
});

电梯导航跳转到对应模块

点击电梯导航的对应模块，页面会跳转到对应的模块位置。这可以通过监听页面的click事件，并使用scrollIntoView方法实现。

const list = document.querySelector('.elevator-list');
list.addEventListener('click', function (e) {
  if (e.target.tagName === 'A' && e.target.dataset.name) {
    const active = document.querySelector('.elevator-list .active');
    if (active) {
      active.classList.remove('active');
    }
    e.target.classList.add('active');
    const section = document.querySelector(`.${e.target.dataset.name}`);
    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});

页面滚动时电梯导航样式变化

页面滚动到对应位置时，电梯导航对应模块自动发生变化。这可以通过监听页面的scroll事件，并根据滚动位置动态改变电梯导航的样式。

window.addEventListener('scroll', function () {
  const sections = document.querySelectorAll('.elevator-list a');
  sections.forEach(section => {
    const target = document.querySelector(`.${section.dataset.name}`);
    if (target.offsetTop >= window.pageYOffset - 100 && target.offsetTop < window.pageYOffset + window.innerHeight - 100) {
      section.classList.add('active');
    } else {
      section.classList.remove('active');
    }
  });
});

以上代码展示了如何使用JavaScript实现页面加载、缩放、滚动时电梯导航的显示、隐藏、跳转和样式变化。