html - Bootstrap 导航栏粘性

Question

我想在包含背景图像的 div 中放置一个导航栏 (Bootstrap 4)。当用户向下滚动时，导航栏应该停留在顶部，调整大小并更改它的颜色。 如果我将它放在 div 中，它会保持粘性，直到 bg-img 滚出 View 。当导航栏位于此 div 上方时，它会起作用。 这是播放代码:https://www.codeply.com/go/WbswGGulCf

谢谢!

编辑: 这是代码: HTML:

<div class="top flex-center position-ref">
    <div class="top-right links">
        <a href="#">Kontakt</a>
        <a href="#">Login</a> 
    </div>
</div>
<div class="container-fluid">
    <span class="position-absolute trigger"></span>

    <nav class="navbar navbar-expand-lg navbar-light sticky-top">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link3</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link4</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="bgimg">
        <div class="flex-center content full-height">
            <div class="title">
                Lorem ipsum dolor sit amet
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Leo a diam sollicitudin tempor id eu. Tellus at urna condimentum mattis. Nunc mattis enim ut tellus. Feugiat vivamus at augue eget arcu dictum. Mi proin sed libero enim sed faucibus turpis in. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Mauris rhoncus aenean vel elit. Mi bibendum neque egestas congue quisque egestas diam. Convallis posuere morbi leo urna. Aliquam sem fringilla ut morbi tincidunt. Mattis molestie a iaculis at. Felis donec et odio pellentesque diam volutpat commodo sed.

A arcu cursus vitae congue mauris rhoncus aenean vel elit. Velit egestas dui id ornare arcu odio. Tincidunt nunc pulvinar sapien et. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mauris rhoncus aenean vel elit scelerisque mauris. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Neque convallis a cras semper auctor neque. Quam id leo in vitae turpis massa sed elementum tempus. Sit amet purus gravida quis blandit turpis. Quisque id diam vel quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque. Turpis in eu mi bibendum neque egestas congue quisque egestas. Ipsum consequat nisl vel pretium lectus quam id leo in. Massa placerat duis ultricies lacus sed turpis.</p>
        </div>
    </div>
</div>

Javascript:

(new IntersectionObserver(function(e,o){
    if (e[0].intersectionRatio > 0){
        document.documentElement.removeAttribute('class');
    } else {
        document.documentElement.setAttribute('class','stuck');
    }
})).observe(document.querySelector('.trigger'));

CSS:

        .flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}
        .top {
    background-color: #fff;
    height: 60px;
}
.sticky-top {
    transition: all 0.25s ease-in;
}

.stuck .sticky-top {
    background-color: #326f8d !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    margin-left: -1vw;
    margin-right: -1vw;
}
        .bgimg {
    text-align: center;
    background-image: url(https://placeimg.com/1000/480/animals);
    background-attachment: fixed;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-size: cover;
    margin-left: -1vw;
    margin-right: -1vw;
    /* height: calc(100% - 60px); */
}
        .top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}
        .links > a {
    color: #433b3b;
    padding: 0 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}
            .content {
        height: 280px;
        color: #fff;
    }

Answer 1

当您将 position: sticky 应用于该元素时，它只会保持固定状态，直到它到达其父元素内容的末尾。因此，当图像到达末端时，您的导航会向上移动。在您的情况下，position: sticky 应用于类 sticky-top。使用 position:fixed 将导航放置在包含背景图像的 div 中时停止它。