当导航不在页面顶部时滚动时修复导航[重复]

Question

我有一个导航元素，它从一开始就不在页面顶部，但我想要的是当我开始向下滚动页面时，它必须贴在页面顶部，当我向上滚动时，它必须回到之前的位置。我不知道该怎么做。 这是我的代码：

<div class="container-fluid">
    <div class="row">
        <header id="Home" class="header header-top">
            <div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
                <p>text</p>
                <p>text</p>
            </div>
            <div id="logo-header" class="col-lg-4 col-md-4 col-sm-4">
                <a href="#Home"><img src="Content/images/logo.png" width="260" height="240"></a>
            </div>
            <div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
                <p>text</p>
                <p>text</p>
            </div>

        </header>
        <nav id="header-nav">
            <div class="openMenu"><i class="fa fa-bars"></i></div>
            <ul class="mainMenu">
                <li><a href="#Home">item1</a></li>
                <li><a href="#AboutMe">item2</a></li>
                <li><a href="#Resume">item3</a></li>
                <li><a href="#Skills">item4</a></li>
                <li><a href="#Contact">item5</a></li>
                <li><a href="#Comment">item6</a></li>
                <div class="closeMenu"><i class="fa fa-times"></i></div>
                <span class="icons">
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                </span>
            </ul>
        </nav>
    </div>
</div>

<style>
.header {
    text-align: center;
}

.header-top {
    font-size: 4.7rem;
    font-weight: 500;
    height: 260px;
    background: url("../images/bg1.jpg") no-repeat;
    background-size: 100% 260px;
}

.header-top-p {
    padding: 60px 0 40px;
    animation: names-header var(--names-header-time) ease-out;
}

#logo-header {
    height: 240px;
    margin: 0 auto;
    animation: var(--logo-header-time) ease-in-out 900ms 1 logo-header;
    animation-fill-mode: backwards;
}

#header-nav {
    background-color: yellow;
    color: #333300;
    justify-content: space-between;
    height: 70px;
    background-image: linear-gradient(to right, #ffffb3, #ffff66, #ffff00, #b3b300);
    width: 100%;
    margin: 0 auto;
    transition: .4s ease-out;
    animation: nav-load var(--nav-load-time) ease-in;
    align-items: center;
    z-index: 100000;
}

nav .mainMenu {
    list-style: none;
    display: flex;
}
#header-nav ul li {
    position: relative;
    zoom: 1;
    -webkit-backface-visibility: hidden;
    vertical-align: middle;
    margin: 0 auto;
    transition: .4s ease-out;
}
nav .mainMenu li a {
    font-weight: bold;
    color: #333300;
    padding: 22px;
    display: inline-block;
    text-decoration: none;
    font-size: 2rem;
}
nav .mainMenu .closeMenu, .icons i {
    font-size: 2rem;
    display: none;
    cursor: pointer;
}
</style>

如果有帮助，我正在使用 bootstrap 3。 基本上，当我向下滚动时，它必须将导航固定在顶部，并且 `header 顶级类不应该再可见了，当我向上滚动时它再次可见。 感谢您的帮助。

Answer 1

position: sticky;

你可以试试这个属性，文档链接https://developer.mozilla.org/en-US/docs/Web/CSS/position