滚动上的 CSS 静态标题 - CSS

有时候我们需要在网页中添加一个固定的标题栏，同时在滚动页面时保持固定不动。本文将介绍如何使用 CSS 实现这一功能。

实现

首先，我们需要一个具有滚动效果的盒子，如下所示：

.scroll {
    overflow-y: scroll;
    height: 150px;
}

接下来，我们将给这个盒子添加一个固定在顶部的标题栏。我们可以使用 position: fixed 属性让标题栏保持固定不动，在这个属性之上，我们需要添加 top: 0 属性，让标题栏位于页面的顶部：

.scroll-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 999;
}

这样就可以让标题栏固定在页面的顶部了。接下来我们需要添加一些样式来调整这个标题栏：

.scroll-header h2 {
    margin: 0;
    padding: 10px;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

这个样式将会为标题栏添加一个 18px 的大写字母标题，同时会在底部添加一个 1px 的灰色边框。

最后，我们需要将这个标题栏添加到我们的 HTML 页面中。以下是完整的代码片段：

<div class="scroll">
    <div class="scroll-header">
        <h2>My Title</h2>
    </div>
    <p>Your content goes here.</p>
</div>

这样就可以在你的网页中添加一个固定顶部标题栏了。

总结

本文介绍了如何使用 CSS 在网页中添加一个固定的滚动标题栏。我们学习了如何使用 position: fixed 和 top: 0 属性来实现这一功能，以及如何调整标题栏的样式。现在你可以在你的网页中自由使用这个技巧了！