Problems with Sticky effect on Navbar - html

Question

I am facing problems with sticky navbar on my website.
I used the code of w3schools for this navbar. The problem is that sticky effect on nav menu does not work at all. Menu just disappers during scrolling.
Link to my website
Here is how nav menu looks like:
CSS:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>

Answer 1

You have to set the sticky code on the container to apply, not directly on the navbar. As sticky works only for siblings and not the whole page.
<div class="col-lg-12" style="
position: sticky;
z-index: 1;
top: 0;
">
<br>
<div id="navbar-complex" class="scrollmenu tab-content nav nav-tabs">
This way it works. after you have some z-index problem but this is different
#id1, #id2{
width: 50%;
float:left;
}
#id1{
background: lightgreen;
}
#id2{
background: lightblue;
}
#id1 nav{
position: sticky;
top:0;
z-index:1;
}
#id2 .navContainer{
position: sticky;
top:0;
z-index:1;
}
nav{
background: lightgray;
}
.content{
width: 100%;
height: 500vh;
}
<div id="id1">
<h1>What you are doing</h1>
<div class="navContainer">
<nav>I am supposed to be sticky</nav>
</div>
<div class="content">
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
</div>
</div>
<div id="id2">
<h1> What you want</h1>
<div class="navContainer">
<nav>I am sticky</nav>
</div>
<div class="content">
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br> Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
Lorem ipsum
<br>
</div>
</div>