I need help in fxing the navigation bar at the top of the page whenever i am scrolling. Its a requirement for my project and I’m having difficulties in doing this. Please help me!
Below is the code for the navbar/menu that I wanted to fix at the top of the page
<div class="sidebar">
<div class="hdn-head">
<h2>Hello, Sign in</h2>
</div>
<div class="hdn-content">
<h3>Digital Content & Devices</h3>
<ul>
<div>
<li>Amazon Music</li><i class="fa-solid fa-angle-right"></i>
</div>
<div>
<li>Kindle E-Readers & Books</li><i class="fa-solid fa-angle-right"></i>
</div>
<div>
<li>Appstore for Android</li><i class="fa-solid fa-angle-right"></i>
</div>
</ul>
<div class="line"></div>
</div>
<div class="hdn-content">
<h3>Shop By Department</h3>
<ul>
<div>
<li>Electronics</li><i class="fa-solid fa-angle-right"></i>
</div>
<div>
<li>Computers</li><i class="fa-solid fa-angle-right"></i>
</div>
<div>
<li>Smart Homes</li><i class="fa-solid fa-angle-right"></i>
</div>
<div>
<li>Arts & Crafts</li><i class="fa-solid fa-angle-right"></i>
</div>
</ul>
<div class="line"></div>
</div>
<div class="hdn-content">
<h3>Programs & Features</h3>
<ul>
<div>
<li>Gift Cards & Mobile Recharges</li><i class="fa-solid fa-angle-right"></i>
</div>
<div>
<li>Flight Tickets</li><i class="fa-solid fa-angle-right"></i>
</div>
<div>
<li>Clearance Store</li><i class="fa-solid fa-angle-right"></i>
</div>
</ul>
<div class="line"></div>
</div>
</div>
<i class="fa-solid fa-xmark"></i>
<div class="triangle"><i class="fa-solid fa-triangle"></i></div>
<div class="hdn-sign">
<div class="hdn-table">
<div>
<h3>Your Lists</h3>
<ul>
<li>Create a List</li>
<li>Find a List & Registry</li>
<li>Amazon Smile Charity Lists</li>
</ul>
</div>
<div class="hdn-line"></div>
<div>
<h3>Your Account</h3>
<ul>
<li>Account</li>
<li>Orders</li>
<li>Recommendations</li>
<li>Browsing History</li>
<li>Watchlist</li>
<li>Video Purchases</li>
<li>Kindle Unlimited</li>
<li>Content & Devices</li>
<li>Subscribe & Save Items</li>
<li>Membership</li>
<li>Music Library</li>
</ul>
</div>
</div>
</div>
<div class="black"></div>
<header id="navbar_top">
<section class="navbar">
<div class="first">
<div class="flex logo">
<a href="#"><img src="images/logo.png" alt=""></a>
<div class="map flex">
<i class="fas fa-map-marker"></i>
<div>
<span>Deliver to</span>
<span>Philippines</span>
</div>
</div>
</div>
<div class="flex input">
<div>
<span>All</span>
<i class="fas fa-caret-down"></i>
</div>
<input type="text">
<i class="fas fa-search"></i>
</div>
<div class="flex right">
<div class="flex lang">
<img src="images/usflag.jpg" alt="">
<i class="fas fa-caret-down"></i>
</div>
<div class="sign">
<span>Hello, Sign in</span>
<div class="flex ac">
<span>Accounts & Lists</span>
<i class="fas fa-caret-down"></i>
</div>
</div>
<div class="sign">
<span>Returns</span>
<span>& Orders</span>
</div>
<div class="flex cart">
<i class="fas fa-shopping-cart"></i>
<span class="ca">Cart</span>
</div>
</div>
</div>
<div class="second">
<div class="second-1">
<div>
<i class="fas fa-bars"></i>
<span>All</span>
</div>
</div>
<div class="second-2">
<ul>
<li>Today's Deal</li>
<li>Customer Service</li>
<li>Registry</li>
<li>Gift Cards</li>
<li>Sell</li>
</ul>
</div>
<div class="second-3">
<span>Shop Valentine's Day</span>
</div>
</div>
</section>
</header>
And here is the CSS and the JavaScript
.navbar_top{
position: fixed;
scroll-behavior: smooth;
top:0;
width: 100%;
overflow: hidden;
}
document.addEventListener("DOMContentLoaded", function(){
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
document.getElementById('navbar_top').classList.add('fixed-top');
// add padding top to show content behind navbar
navbar_height = document.querySelector('.navbar').offsetHeight;
document.body.style.paddingTop = navbar_height + 'px';
} else {
document.getElementById('navbar_top').classList.remove('fixed-top');
// remove padding top from body
document.body.style.paddingTop = '0';
}
});
});
Can you please help me create a code for this? Its an Amazon Clone Project that I need to finish for my job. I hope you can help me!
2
Answers
Your JS seems to be adding "fixed-top" to the classlist of your nav/header element while your CSS is applying its style to the navbar_top class.
I tried replacing this in a JS Fiddle and I had your desired behaviour.
There are still some improvements you could make.
Such as the use of correct html tags (e.g.
<nav>, see https://www.w3schools.com/TAGs/ )Or a way of handling opacity between your navbar and body content.
I’m sure you can find all your answers easily though!
You can use
position: stickyon your navbar/ menu. This eliminates the need for any JS.