My webpage includes a navigation element that initially is not positioned at the top of the page. However, I want it to stick to the top of the page when I start scrolling down and return to its previous position when scrolling up. Unfortunately, I am unsure how to achieve this functionality. Below are the relevant sections of my code:
<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 utilizing Bootstrap 3 in my project which might be helpful information. Essentially, I need the navigation to become fixed at the top of the page as I scroll down, hiding the 'header top' section, and reappear as I scroll back up. Any assistance would be highly appreciated.