Navbar sticky

HTML, CSS, JS - Draft

by Ovi Stof

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>
<div class="bg-warning py-3">
	<div class="container">
		Some top header info for demo
	</div>
</div>

<!-- ============= COMPONENT ============== -->
<nav id="navbar_top" class="navbar navbar-expand-lg navbar-dark bg-primary">
 <div class="container">
 	 <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="main_nav">
	

	<ul class="navbar-nav ms-auto">
		<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
		<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
		<li class="nav-item dropdown">
			<a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
		    <ul class="dropdown-menu dropdown-menu-right">
			  <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
			  <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
		    </ul>
		</li>
	</ul>

  </div> <!-- navbar-collapse.// -->
 </div> <!-- container-fluid.// -->
</nav>
<!-- ============= COMPONENT END// ============== -->



<div class="container" style="max-width: 720px">

<header class="py-4">
	<h2>Demo page </h2> 
</header> <!-- section-header.// -->
<p style="text-align:right;"><a href="https://bootstrap-menu.com/detail-fixed-onscroll.html" target="_blank"> Sursa <i class="fa fa-external-link"></i></a></p>
<section>

		
		<h6>Demo for navbar or header make fixed after scroll <br> Based on Bootstrap 5 CSS framework.  </h6>
        <p>For this demo page you should connect to the internet to receive files from...

CSS

.fixed-top {
	    top: -40px;
	    transform: translateY(40px);
	    transition: transform .3s;
	}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
		
		window.addEventListener('scroll', function() {
	       
			if (window.scrollY > 200) {
				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';
			} 
		});
	});