写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复 - Riesenzahn - 沸点 - 掘金

6月前

写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
要实现当页面滚动一定高度时，导航固定在顶部的效果，可以使用 JavaScript 结合 CSS 来完成。下面是一个简单的实现示例：

### HTML 结构

```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定导航示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="navbar" id="navbar">导航栏</div>
<div class="content">
<p>这里是内容区域，滚动查看效果...</p>
<p>这是一些示例内容...</p>

<div style="height: 2000px;"></div>
</div>

<script src="script.js"></script>
</body>
</html>
```

### CSS 样式 (styles.css)

```css
body {
font-family: Arial, sans-serif;
}

.navbar {
background-color: #333;
color: white;
padding: 10px 20px;
width: 100%;
transition: top 0.3s; /* 平滑过渡效果 */
position: relative; /* 初始位置 */
}

.fixed {
position: fixed; /* 固定定位 */
top: 0; /* 顶部对齐 */
left: 0;
right: 0;
}
```

### JavaScript 逻辑 (scr

展开

今天学到了

赞过