利用 CSS position: sticky 实现智能可浮动顶部通知横幅

顶部通知横幅的常见挑战

在网页设计中，顶部通知横幅（alert banner）是一种常见的ui元素，用于向用户显示重要信息。然而，实现一个功能完善、用户体验良好的顶部通知横幅并非总是直截了当。许多开发者倾向于使用 position: fixed; 来确保横幅始终固定在视口顶部。

尽管 position: fixed; 能使元素固定在视口中，但它会使元素脱离文档流，导致以下问题：

1. 内容覆盖： 固定定位的横幅会悬浮在页面内容之上，遮挡住其下方的页面元素，特别是页面的顶部菜单或标题。
2. 高度管理复杂： 为了避免内容被覆盖，开发者往往需要手动计算横幅的高度，并通过 JavaScript 或额外的 CSS 为主内容区域设置 margin-top 或 padding-top。这种方法不仅增加了代码的复杂性，也难以适应横幅高度变化或不同横幅共存的场景，容易造成维护难题。
3. 非语义化： 频繁地通过 JavaScript 动态调整页面布局，可能导致性能问题和布局抖动。

理想的顶部通知横幅应具备以下特性：

• 占据空间： 当横幅显示时，它应该将下方的页面内容向下推动，而不是覆盖。
• 滚动浮动： 当用户向下滚动页面时，横幅应始终保持在视口顶部可见。
• 可关闭性： 用户可以关闭横幅，关闭后页面内容应恢复到原位。

核心解决方案：利用 position: sticky

CSS 的 position: sticky; 属性为解决上述问题提供了一个优雅而强大的原生解决方案。sticky 元素在达到指定阈值前表现为 position: relative;，即它仍然在文档流中占据空间；一旦滚动到阈值，它就会表现为 position: fixed;，停留在视口中。

实现原理

1. 占据空间： 由于 position: sticky; 元素在未触发浮动前仍处于文档流中，它会自然地占据其应有的高度，从而将下方的页面内容向下推动。
2. 滚动浮动： 通过设置 top: 0;，当页面滚动到横幅的顶部边缘与视口顶部重合时，横幅就会“粘”在视口顶部，实现浮动效果。
3. 关闭与内容回弹： 当横幅被关闭时，通过将其 display 属性设置为 none，它将从文档流中移除，页面内容便会自动向上回弹。

示例代码

下面是一个完整的 HTML、CSS 和 JavaScript 示例，演示了如何实现一个具备上述功能的顶部通知横幅。

立即学习“前端免费学习笔记（深入）”；

TTSMaker

TTSMaker是一个免费的文本转语音工具，提供语音生成服务，支持多种语言。

下载

index.html

    
    
    
    


    

        
        
重要通知：系统将于今晚进行维护！

        
        

        
        

            
欢迎来到我们的网站
            
这里是页面的主要内容区域。请添加足够多的内容，以便您能够滚动页面，观察通知横幅的浮动效果。
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            
Curabitur pretium tincidunt lacus. Nulla gravida. Fusce et ipsum et orci mollis eleifend. Fusce in quam. Nam at nisi. Maecenas non leo. Aliquam eu nulla. Donec aliquam, diam ac euismod egestas, nunc ipsum nonummy enim, eget bibendum neque justo non nulla. Donec eu mi ac nunc eleifend interdum. Duis aliquam. Ut in lectus. Ut sit amet quam. Sed a elit. Sed a libero. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eu nibh. Praesent eu risus. Cras lectus.
            
Vivamus id enim. Aliquam nec lectus. Aliquam id tellus. Integer at nulla. Donec a leo. Integer a libero. Donec a mi. Donec a nisl. Nam quis nulla. Donec quis lacus. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis enim. Donec quis