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");
}
}<header id="home">
<nav id="navbar">
<div class="row flex">
<a href="#"><img src="img/logo.png" class="logo" alt="logo"></a>
<ul>
<li><a href="#home" class="active">home</a></li>
<li><a href="#service">service</a></li>
<li><a href="#team">team</a></li>
<li><a href="#skill">skill</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#review">review</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="hero-text-box">
<h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
<a href="#" class="btn btn-hero">work with us!</a>
</div>
</div>
</header>You will have to specify at what position you want to stick that bar. Position: Sticky works with some position where you want to stick that navbar. For Example:
position: sticky;
top: 3rem;
change your css from:
.sticky {
position: fixed;
top: 0;
}
to
.sticky {
position: sticky;
top: 0;
}
Refer to this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Try providing the top where you want to stick the bar while scrolling. try with below code:
<!DOCTYPE HTML>
<html>
<style>
.sticky{
position: sticky;
top: 0;
}
</style>
<header id="home1">
<nav id="navbar" class="sticky">
<div class="row flex">
<a href="#"><img src="img/logo.png" class="logo" alt="logo"></a>
<ul>
<li><a href="#home" class="active">home</a></li>
<li><a href="#service">service</a></li>
<li><a href="#team">team</a></li>
<li><a href="#skill">skill</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#review">review</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="hero-text-box">
<h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
<a href="#" class="btn btn-hero">work with us!</a>
</div>
</div>
</header>
</html>