html左侧导航栏不随页面滚动
时间: 2023-08-21 08:14:49 浏览: 60
要实现左侧导航栏不随页面滚动,你可以使用 CSS 的 position 属性来控制导航栏的定位。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置导航栏的样式 */
.navigation {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #f1f1f1;
width: 200px;
height: 100vh; /* 设置导航栏高度和视口高度一致,使其充满整个视口 */
}
/* 设置内容区域的样式 */
.content {
margin-left: 200px; /* 将内容区域的左边距设置为导航栏的宽度,以防止内容被导航栏遮挡 */
}
</style>
</head>
<body>
<div class="navigation">
<!-- 导航栏内容 -->
</div>
<div class="content">
<!-- 页面内容 -->
</div>
</body>
</html>
```
在上面的示例中,我们使用了 `position: fixed;` 来将导航栏固定在页面的左侧。然后通过设置 `top: 50%;` 和 `transform: translateY(-50%);` 将导航栏垂直居中对齐。通过设置 `width: 200px;` 和 `height: 100vh;` 来定义导航栏的宽度和高度,使其充满整个视口。
最后,在内容区域中使用 `margin-left: 200px;` 来给内容区域留出导航栏的宽度,以防止内容被导航栏遮挡。
这样就可以实现左侧导航栏不随页面滚动的效果了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)