动态的 Tab 栏

介绍

日常在使用移动端 APP 或访问 PC 端网站的时候，常常发现在一些有工具栏或者 Tab 栏的页面会有顶栏固定的效果。简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。

本题请实现一个顶栏固定的课程网站首页。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
├── css
│   └── style.css
├── effect.gif
├── images
│   ├── C++_course.png
│   ├── VSCode.png
│   ├── about.png
│   ├── linux_course.png
│   └── python_course.png
├── index.html
└── js
    └── index.js

其中：

  • css/style.css 是样式文件。
  • index.html 是主页面。
  • js/index.js 是页面的 js 文件。
  • effect.gif 是最终完成的效果图。
  • images 文件夹下是项目中用到的图片文件。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

1
2
3
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/17153/scroll.zip
unzip scroll.zip && rm scroll.zip

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

图片描述

目标

请在 style.css 文件中补全代码。

当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。

完成后，效果如下：

图片描述

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
  • 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 1338 | 总提交次数: 1411 | 通过率: 94.8%

难度: 简单 标签: 2023, 省模拟赛, Web 前端, CSS3

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: white;
  gap: 1rem;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;

  /* TODO: 请在此补充代码实现tab栏动态固定 */
  position: sticky;
  top: 0;
}