当前位置：极客教程 > CSS > CSS 问答 > CSS容器头部固定，结果可以滚动

CSS容器头部固定，结果可以滚动

CSS容器头部固定，结果可以滚动

在网页设计中，经常会遇到这样的需求：页面上有一个容器，容器的头部需要固定在页面顶部，而容器的内容部分需要可以滚动。这种布局在很多网站和应用中都很常见，比如新闻网站的文章详情页、博客的文章列表页等。本文将介绍如何使用CSS实现这种布局效果。

1. 使用position: fixed实现头部固定

首先，我们可以使用CSS的position: fixed属性来实现容器头部固定在页面顶部的效果。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Header</title>
<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.content {
  margin-top: 50px; /* 让内容部分不被头部遮挡 */
  height: 2000px; /* 为了让页面有足够的高度，方便滚动 */
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">Content - geek-docs.com</div>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们使用了position: fixed来让头部固定在页面顶部，然后通过设置top: 0和left: 0让头部紧贴页面的左上角。内容部分通过设置margin-top: 50px来避免被头部遮挡。

2. 使用overflow: auto实现内容滚动

接下来，我们需要让内容部分可以滚动。我们可以使用CSS的overflow: auto属性来实现这一效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollable Content</title>
<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.content {
  margin-top: 50px;
  height: 300px;
  overflow: auto;
  padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们给内容部分设置了overflow: auto属性，这样当内容超出容器的高度时，会显示滚动条，用户可以通过滚动条来查看内容的其他部分。

3. 使用max-height实现内容最大高度

有时候，我们希望内容部分的高度不要无限增长，而是有一个最大高度限制。这时，我们可以使用CSS的max-height属性来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max Height Content</title>
<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.content {
  margin-top: 50px;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们给内容部分设置了max-height: 300px，这样内容部分的高度不会超过300px，超出部分会显示滚动条。

4. 使用flex布局实现固定头部和滚动内容

除了上面介绍的方法，我们还可以使用flex布局来实现固定头部和滚动内容的效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Layout</title>
<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.content {
  flex: 1;
  overflow: auto;
  padding: 10px;
}
</style>
</head>
<body>
<div class="container">
  <div class="header">Header - geek-docs.com</div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
  </div>
</div>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们使用了flex布局，通过设置display: flex和flex-direction: column让容器的子元素按垂直方向排列。头部部分的高度由内容撑开，而内容部分会占据剩余的空间，并且可以滚动。

5. 使用JavaScript动态计算高度

有时候，我们希望内容部分的高度可以根据页面的实际高度来动态计算，这时可以使用JavaScript来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Height</title>
<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.content {
  margin-top: 50px;
  overflow: auto;
  padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content" id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
<script>
window.onload = function() {
  var content = document.getElementById('content');
  var windowHeight = window.innerHeight;
  var headerHeight = document.querySelector('.header').offsetHeight;
  content.style.height = (windowHeight - headerHeight) + 'px';
};
</script>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们使用JavaScript在页面加载完成后动态计算内容部分的高度，使其占据剩余的空间。通过获取窗口的高度和头部的高度，计算出内容部分的高度并设置给内容部分。

6. 使用sticky属性实现头部固定

除了position: fixed，CSS还提供了position: sticky属性来实现头部固定的效果。position: sticky会在元素到达特定位置时固定在页面上。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header</title>
<style>
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.content {
  margin-top: 50px;
  height: 2000px;
  padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们使用了position: sticky来让头部在到达页面顶部时固定在页面上。需要注意的是，position: sticky在一些旧版本的浏览器中可能不支持，需要添加-webkit-sticky作为兼容。

7. 使用JavaScript监听滚动事件

有时候，我们希望在用户滚动页面时改变头部的样式或行为，这时可以使用JavaScript来监听滚动事件。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Event</title>
<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
.content {
  margin-top: 50px;
  height: 2000px;
  padding: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">Header - geek-docs.com</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
<script>
window.onscroll = function() {
  var header = document.getElementById('header');
  if (window.scrollY > 50) {
    header.style.backgroundColor = '#555';
  } else {
    header.style.backgroundColor = '#333';
  }
};
</script>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们使用JavaScript监听onscroll事件，当用户滚动页面时改变头部的背景颜色。当页面滚动超过50px时，头部的背景颜色会变为灰色，否则为黑色。

8. 使用CSS动画效果

除了改变头部的样式，我们还可以通过CSS动画效果来增强用户体验。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  transition: background-color 0.3s;
}
.content {
  margin-top: 50px;
  height: 2000px;
  padding: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">Header - geek-docs.com</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
<script>
window.onscroll = function() {
  var header = document.getElementById('header');
  if (window.scrollY > 50) {
    header.style.backgroundColor = '#555';
  } else {
    header.style.backgroundColor = '#333';
  }
};
</script>
</body>
</html>

Output:

CSS容器头部固定，结果可以滚动

在上面的示例中，我们给头部添加了一个过渡效果，当背景颜色发生变化时会有一个0.3秒的渐变效果，使页面变化更加平滑。

结语

通过本文的介绍，我们学习了如何使用CSS和JavaScript实现容器头部固定，内容可以滚动的效果。无论是固定头部、滚动内容、动态计算高度还是添加动画效果，都可以通过简单的代码实现。这些技术可以帮助我们创建更加交互和吸引人的页面，提升用户体验。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

CSS 精品教程