我的导航栏不会粘在屏幕顶部，使用`position：sticky` [重复]

Question

我正在尝试创建一个网站，但我不知道如何使用 position: sticky 将导航栏固定在顶部。

这是包含导航栏的 div 的 CSS，下面是指向整个 codepen 的链接

    height: 40px;
    width: 100%;

    position: sticky;
    position: -webkit-sticky;
    top: 0;

    background: rgb(78, 78, 78);
}

提前致谢 https://codepen.io/AwesomeDude/pen/eYZQQyJ

Answer 1

在我看来，您似乎希望nav 标记本身成为贴在顶部而不是背景的标记。我将position: sticky 代码移动到.nav 块中，这样就成功了。希望这是有道理的:)

.nav {
     position: sticky;
    position: -webkit-sticky;
    top: 0;
}

Answer 2

position:sticky 的行为类似于 position:relative。

你应该使用position: fixed

    height: 40px;
    width: 100%;

    position: fixed;
    position: -webkit-sticky;
    top: 0;

    background: rgb(78, 78, 78);
}

给出以下结果：

// efe find something to put here

let x = 0
while (x < 50) {
    let element = document.createElement("br");
    document.body.appendChild(element);
    x++;
}

:root {
    --navVertPadding: 10px;
    --navBorderRadius: 6px
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* cursor: wait; */
}

body {
    background-color: rgb(17, 17, 17);
}

.body-light {
    background-color: rgb(223, 223, 223);
}

.nav-background {
    height: 40px;
    width: 100%;

    position: fixed;
    position: -webkit-sticky;
    top: 0;

    background: rgb(78, 78, 78);
}

.dropdown {
    width: 80%;
    height: 100%;

    margin: auto;

    background: rgb(78, 78, 78);
    display: flex;

    align-items: center;
    justify-content: space-around;
}

.dropdown button a {
    text-decoration: none;
    color: black;
}

.dropdown div {
    position: relative;
}

.dropdown ul {
    position: absolute;
    top: 50px;

    display: none;

    opacity: 0;

    width:  120px;
    height: auto;

    list-style: none;
}

.dropdown ul li a {
    padding-top: var(--navVertPadding);
    padding-bottom: var(--navVertPadding);

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: rgba(53, 198, 255, 0.63);

    transition: 500ms background-color;
}

.dropdown ul li {
    border-bottom: 1px solid black
}

.dropdown ul li:last-child {
    border-bottom: none;
}

.dropdown ul li:hover a {
    background-color: rgba(126, 214, 255, 0.678);
}

.dropdown button:hover ~ ul, .dropdown ul:hover {
    display: block;
    opacity: 1.0;
}

.dropdown ul a {
    color: black;
    text-decoration: none;
}

.dropdown button {
    background: none;
    color: black;
    border-radius: 5px;
    border: none;

    padding: 8px;

    font-size: 15 px;
    font-family: "Verdana";
    font-weight: bold;
    text-transform: uppercase;

    cursor: pointer;
    height: 50px;
}
 
.dropdown button::after {
    content: '';
    display: block;

    position: relative;

    background-color: black;
    border-radius: 10px;

    width:  0%;
    height: 3px;

    transition: 300ms width ease, 400ms background-color ease 1500ms;
}

.dropdown button:hover::after {
    width: 101%;
    background-color: rgb(243, 29, 214)
}

<nav class="nav">
            <div class="nav-background">
                <div class="dropdown" id="dropdown">
    
                    <button class="home">
                        <a href="site.html" class="home-link">
                            home
                        </a>
                    </button>
    
                    <div class="projects">
                        <button>
                            projects
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    Example 1
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Example 1
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="minecraft">
                        <button>
                            minecraft
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    datapacks
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    resourcepacks
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    resources
                                </a>
                            </li>
                        </ul>
                    </div>
    
                    <div class="generators">
                        <button>
                            generators
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    Generator 1
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Generator 2
                                </a>
                            </li>
                        </ul>
                    </div>
    
                    <div class="other">
                        <button>
                            about
                        </button>
                        <ul>
                            <li>
                                <a href="#">
                                    contact
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    feedback
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
        </nav>