I have a nav element where it's not at the top of the page from the beginning but what i want is when i start scrolling the page down, it must stick at the top of the page and when i scroll it up, it must return to the previous position. i don't know how to do it. here are my codes:
<div class="container-fluid">
<div class="row">
<header id="Home" class="header header-top">
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
<p>text</p>
</div>
<div id="logo-header" class="col-lg-4 col-md-4 col-sm-4">
<a href="#Home"><img src="Content/images/logo.png" width="260" height="240"></a>
</div>
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
<p>text</p>
</div>
</header>
<nav id="header-nav">
<div class="openMenu"><i class="fa fa-bars"></i></div>
<ul class="mainMenu">
<li><a href="#Home">item1</a></li>
<li><a href="#AboutMe">item2</a></li>
<li><a href="#Resume">item3</a></li>
<li><a href="#Skills">item4</a></li>
<li><a href="#Contact">item5</a></li>
<li><a href="#Comment">item6</a></li>
<div class="closeMenu"><i class="fa fa-times"></i></div>
<span class="icons">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</span>
</ul>
</nav>
</div>
</div>
<style>
.header {
text-align: center;
}
.header-top {
font-size: 4.7rem;
font-weight: 500;
height: 260px;
background: url("../images/bg1.jpg") no-repeat;
background-size: 100% 260px;
}
.header-top-p {
padding: 60px 0 40px;
animation: names-header var(--names-header-time) ease-out;
}
#logo-header {
height: 240px;
margin: 0 auto;
animation: var(--logo-header-time) ease-in-out 900ms 1 logo-header;
animation-fill-mode: backwards;
}
#header-nav {
background-color: yellow;
color: #333300;
justify-content: space-between;
height: 70px;
background-image: linear-gradient(to right, #ffffb3, #ffff66, #ffff00, #b3b300);
width: 100%;
margin: 0 auto;
transition: .4s ease-out;
animation: nav-load var(--nav-load-time) ease-in;
align-items: center;
z-index: 100000;
}
nav .mainMenu {
list-style: none;
display: flex;
}
#header-nav ul li {
position: relative;
zoom: 1;
-webkit-backface-visibility: hidden;
vertical-align: middle;
margin: 0 auto;
transition: .4s ease-out;
}
nav .mainMenu li a {
font-weight: bold;
color: #333300;
padding: 22px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
nav .mainMenu .closeMenu, .icons i {
font-size: 2rem;
display: none;
cursor: pointer;
}
</style>
I am using bootstrap 3 if it helps. basically, when I scroll down, it must fix the nav at the top and the `header top class shouldn't be visible anymore and again it gets visible when I scroll up. I appreciate any help.
