Bootstrap navbar sticky - html

Question

I want to place a navbar (Bootstrap 4) in a div that contains a background image. When the user scrolls down, the navbar should stick on top, resize and change it's color.
If I place it in the div it stays sticky until the bg-img scrolls out of view. It works when the navbar is above this div.
Here is the code to play: https://www.codeply.com/go/WbswGGulCf
Thanks!
Edit:
Here is the code:
HTML:
<div class="top flex-center position-ref">
<div class="top-right links">
Kontakt
Login
</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

When you apply position: sticky to the element it only remains fix until it reach to the end of the content of its parent element. Hence your nav goes upward when the end of image reach. And in your case position: sticky is applied on class sticky-top. Use position:fixed to stop that while placing the nav inside the div which conatins background image.