开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情
一个吸顶组件可以使页面上的内容在滚动时保持在顶部，通常用于固定导航菜单或其他重要信息。以下是一些设计和编写吸顶组件的常规步骤：
- 确定组件的定位方式：通常使用 CSS 属性
position: fixed将组件固定在页面顶部。 - 确定组件在页面中的位置：使用 CSS 属性
top、bottom、left、right来确定组件在页面中的具体位置。 - 添加 JavaScript 代码：监听页面滚动事件，通过判断页面滚动的距离来决定是否将组件固定在页面顶部。可以使用
window.scrollY、pageYOffset来获取和比较滚动距离。 - 根据需要进行样式调整：例如添加阴影、修改组件宽度、更改背景色等等。
- 考虑不同设备的显示效果：使用 CSS 媒体查询来为不同的设备（如手机、平板、桌面）调整组件的样式和布局。
需要注意的是，吸顶组件的设计和实现可能会因具体需求而异，因此需要在实际开发中灵活调整。
基于JavaScript控制的吸顶组件
如果不使用 CSS 的 position: sticky 属性或 sticky 类，可以通过使用 JavaScript 来实现吸顶效果。以下是一个使用 JavaScript 实现吸顶组件的基本示例：
HTML 代码：
<div class="header">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</div>
<div class="content">
<!-- 页面主要内容 -->
</div>
CSS 代码：
.header {
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
JavaScript 代码：
const header = document.querySelector('.header');
const headerHeight = header.offsetHeight;
let isSticky = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= headerHeight) {
if (!isSticky) {
header.style.position = 'fixed';
header.style.top = '0';
isSticky = true;
}
} else {
if (isSticky) {
header.style.position = '';
header.style.top = '';
isSticky = false;
}
}
});
在上面的代码中，我们首先使用 JavaScript 获取 .header 元素的高度，并定义一个 isSticky 变量来表示当前是否为吸顶状态。然后，我们使用 scroll 事件监听页面滚动事件，在页面滚动到一定位置后将 .header 元素的位置设置为 fixed，并添加 top 属性，以将组件固定在页面顶部。当页面滚动回顶部时，我们将 .header 元素的位置设置回默认值，从而取消吸顶效果。
基于CSS sticky 的案例
以下是仅使用 HTML、CSS 实现吸顶组件的基本示例：
HTML 代码：
<div class="header">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</div>
<div class="content">
<!-- 页面主要内容 -->
</div>
CSS 代码：
.header {
position: sticky;
top: 0;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
z-index: 1000;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
.content {
margin-top: 70px; /* 为 header 留出空间 */
height: 100vh;
}
在上面的代码中，我们首先使用 CSS 将 .header 元素定位到页面顶部，并添加了一些样式来美化组件。然后，我们使用 .content 元素的 margin-top 属性为 .header 元素留出空间，以避免组件挡住页面内容。其中最重要的是使用了 position: sticky 这一新CSS属性，避免了JavaScript代码的编写。
