实现类似门户的网页

介绍

在这个项目中，你将学习如何在网页上实现类似门户的功能。门户功能允许用户在长网页上快速定位并导航到他们想要的内容。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何设置项目文件和结构
• 如何使用 JavaScript 和 jQuery 实现门户功能
• 如何确保侧边按钮根据用户的滚动位置改变颜色

🏆 成果

完成这个项目后，你将能够：

• 构建并设置一个网页开发项目
• 使用 JavaScript 和 jQuery 操作 DOM 并处理用户交互
• 实现类似门户的功能，以提升长网页上的用户体验

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

1. 打开项目文件夹。目录结构如下：

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

2. 在这个结构中：

   • index.html 是主页。
   • css 是样式文件的文件夹。
   • images 是图像资源的文件夹。
   • js/index.js 是需要完成的 JS 文件。
   • js/jquery-3.6.0.min.js 是 jQuery 库文件。

3. 点击 WebIDE 右下角的 Go Live 按钮来运行项目。

4. 在 VM 顶部打开“Web 8080”并手动刷新以查看页面。

实现门户功能

在这一步中，你将完成 js/index.js 文件中的代码，以实现门户功能。

1. 将以下代码添加到 js/index.js 文件中：

$(window).scroll(function () {
  // 当页面滚动到指定范围时，相应的侧边按钮会改变颜色。
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // 点击按钮可滚动到指定位置。
  window.scrollTo(0, scrollTopVal);
}

2. 解释：
   • $(window).scroll() 函数用于检测页面的滚动位置。
   • 当页面滚动到指定范围时，相应的侧边按钮会被赋予激活样式（.active-color），其他按钮的样式则设置为默认（.default-color）。
   • toFunction() 函数用于在用户点击侧边按钮时将页面滚动到指定位置。

测试门户功能

1. 返回浏览器并刷新页面。
2. 点击页面侧边的顶部、中间或底部按钮，观察页面滚动到相应范围。
3. 验证当页面滚动到指定范围时，相应的侧边按钮会被赋予激活样式（.active-color）。

最终结果如下所示：

恭喜！你已在项目中成功实现了门户功能。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。