粘性位置不起作用，这是我的css和html代码

Question

CSS代码

我没有任何具有溢出：隐藏的父级或祖级元素。

<div class="header">
            <section class="top">
                <div class="links">
                    <ul>
                        <li><a href="#"><i class="ri-information-2-fill"></i></a></li>
                        <li><a href="#"><i class="ri-mail-fill"></i></a></li>
                        <li><a href="#"><i class="ri-twitter-fill"></i></a></li>
                        <li><a href="#"><i class="ri-facebook-fill"></i></a></li>
                        <li><a href="#"><i class="ri-youtube-fill"></i></a></li>
                    </ul>
                </div>
                <div class="profile">
                    <a href="#">
                        <span>Personal area</span>
                        <i class="ri-user-3-fill"></i>
                    </a>
                </div>
            </section>
            <header>
                <div class="wrapper">
                    <div class="logo-container">
                        <img src="logo/logo.png" alt="logo">
                    </div>
                    <nav class="nav-bar">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About us <i class="ri-arrow-down-s-line"></i></a></li>
                            <li><a href="#">Services <i class="ri-arrow-down-s-line"></i></a></li>
                            <li><a href="#">Blog <i class="ri-arrow-down-s-line"></i></a></li>
                            <li><a href="#">Contact </a></li>
                        </ul>
                    </nav>
                </div>
            </header>
        </div>

我已经尝试过其他问题中提到的方法，但它们对我不起作用。 啊啊啊啊啊aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa啊啊啊啊啊啊

Answer 1

首先，你的 CSS 目标是元素而不是具有 header 类的元素。我不确定这是有意还是无意。

如果这是有意的并且您只是希望元素具有粘性，那么问题是粘性元素只会粘到其父元素滚动离开屏幕为止。在您的情况下，父元素在元素下方没有任何内容，因此一旦元素到达顶部它就会滚动。在元素下方添加一些内容，您将看到它会粘住，直到您添加的内容滚动消失。也许最简单的方法是将元素向上移动一级，这样它就不会被包含在带有类标头的 div 中