css吸顶：标题在滚动时会一直贴着最顶上

北沐xxx

已于 2024-03-17 17:50:27 修改

阅读量994

点赞数

文章标签： css 前端 html

于 2022-12-27 17:46:02 首次发布

本文链接：https://blog.csdn.net/qq_35353972/article/details/128459363

版权

position: sticky

// css 部分
.container {
    background-color: oldlace;
    height: 200px;
    width: 140px;
    overflow: auto;
  }
  .container div {
    height: 20px;
    background-color: aqua;
    border: 1px solid;
  }
  .container .header {
    position: sticky;
    top: 0;
    background-color: rgb(187, 153, 153);
}

// html 部分
<div class="container">
  <div class="header">Header</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

在CSS中，要使一个标题（或其他元素）在滚动时一直贴着页面的最顶部，通常称为“吸顶”效果。这通常通过使用position: sticky属性来实现。sticky定位可以被视为相对定位和固定定位的混合。元素在滚动超过指定偏移位置之前为相对定位，之后为固定定位。

下面是一个简单的例子，演示如何使用position: sticky来实现吸顶效果：

html复制代码

	`<!DOCTYPE html>`
	`<html lang="en">`
	`<head>`
	`<meta charset="UTF-8">`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`<title>吸顶效果示例</title>`
	`<style>`
	`.sticky-header {`
	`position: -webkit-sticky; /* Safari */`
	`position: sticky;`
	`top: 0; /* 元素距离顶部的距离 */`
	`background-color: #333;`
	`color: white;`
	`padding: 10px;`
	`font-size: 20px;`
	`}`

	`/* 为了看到滚动效果，添加一些内容 */`
	`.content {`
	`height: 2000px;`
	`background-color: #f5f5f5;`
	`}`
	`</style>`
	`</head>`
	`<body>`

	`<div class="sticky-header">这是一个吸顶的标题</div>`

	`<div class="content">`
	`<!-- 页面内容 -->`
	`</div>`

	`</body>`
	`</html>`

在这个例子中，.sticky-header类被应用到了你想要吸顶的元素上。position: sticky和top: 0的组合使得这个元素在滚动到其原始位置以上时，会固定在视口顶部。

请注意以下几点：

position: sticky在某些旧版浏览器中可能不受支持，特别是在没有前缀的情况下。为了确保最大的兼容性，你可能需要添加-webkit-前缀。
sticky定位的元素需要有一个top、right、bottom或left属性。这些属性定义了元素相对于其最近的滚动祖先（通常是<body>）的位置。
如果父元素（或其任何祖先元素）的overflow属性设置为hidden、scroll或auto，则sticky定位可能不起作用。
确保你的元素在文档流中有足够的高度，以便在滚动时能够看到其从相对定位到固定定位的转变。
sticky定位的元素在其sticky区域（即滚动到其top位置之前）内表现为相对定位，这意味着它们会受到页面上其他元素的影响。

通过适当使用position: sticky和配合其他CSS样式，你可以实现吸顶效果，使标题或其他元素在滚动时始终保持在视口的顶部。

当然，另一种描述CSS吸顶效果的方法是：

在网页设计中，有时候我们想要某个元素（比如标题）在滚动页面时能够始终保持在页面的顶部，无论用户如何滚动，这个元素都像被“吸”在顶部一样，这种效果就被称为“吸顶”效果。

要实现这种效果，我们可以使用CSS的position: sticky属性。这个属性可以让元素在滚动到特定位置之前表现得像position: relative，即相对于其正常位置进行定位；而当元素滚动到特定位置（通常是通过top、right、bottom或left属性来定义的）时，它就会表现得像position: fixed，即固定在视口中的某个位置。

具体来说，我们可以给想要实现吸顶效果的元素添加一个类，比如.sticky-top，然后在CSS中为这个类设置position: sticky和top: 0。这样，当页面向上滚动，直到这个元素的顶部与视口顶部对齐时，它就会固定在视口的顶部，即使继续滚动页面，它也会保持在那个位置。

需要注意的是，为了使sticky定位有效，元素的父级（或其祖先元素）的overflow属性不能设置为hidden、scroll或auto，否则吸顶效果可能无法正常工作。同时，确保元素的初始位置有足够的空间，以便在滚动时可以观察到它从相对定位转变为固定定位的过程。

通过这种方法，我们可以轻松地实现元素的吸顶效果，提升网页的用户体验和视觉效果。

在网页设计中，有时我们希望某个元素（如标题）在滚动页面时能够始终保持在页面的顶部，这种效果通常被称为“吸顶”效果。

要实现这种效果，我们可以利用CSS的position: sticky属性。这个属性使得元素在滚动到特定位置之前表现得像position: relative，即相对于其正常位置进行定位；而当元素滚动到特定位置（通常通过top、right、bottom或left属性来定义）时，它会表现得像position: fixed，即固定在视口中的某个位置。

具体实现时，我们可以给需要吸顶的元素添加一个类名，比如.sticky-header。然后在CSS中为这个类设置样式：

css复制代码