Бутстрап навбар липкий

Question

Я хочу поместить панель навигации (Bootstrap 4) в элемент div, содержащий фоновое изображение.Когда пользователь прокручивает страницу вниз, панель навигации должна располагаться сверху, изменять ее размер и менять цвет.Если я помещу его в div, он останется липким, пока bg-img не прокрутится из поля зрения.Это работает, когда навигационная панель выше этого 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, который содержит фоновое изображение.