I'm facing an issue with my navbar menu. I implemented some JavaScript code to make the navbar sticky while the user scrolls, but it's not working as expected. The navbar is not staying sticky when the page is scrolled.
Could someone please review my code and help me figure out what might be the problem?
Here is the JavaScript code snippet I used:
window.onscroll = function() {
seeFunction()
};
// Get the navbar
var navbar = document.getElementById("thor");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function seeFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}<div id="thor" class="ttm-header-wrap">
<!-- ttm-stickable-header-w -->
<div id="ttm-stickable-header-w" class="ttm-stickable-header-w clearfix">
<div id="site-header-menu" class="site-header-menu">
<div class="site-header-menu-inner ttm-stickable-header">
<div class="container">
<!-- site-branding -->
<div class="site-branding">
<a class="home-link" href="index.html" title="Planwey" rel="home">
<img id="logo-img" class="img-center" src="TEIA png big.png" alt="logo-img">
</a>
</div>
<!-- site-branding end -->
<div id="site-navigation" class="site-navigation">
<div class="ttm-menu-toggle">
<input type="checkbox" id="menu-toggle-form" />
<label for="menu-toggle-form" class="ttm-menu-toggle-block">
<span class="toggle-block toggle-blocks-1"></span>
<span class="toggle-block toggle-blocks-2"></span>
<span class="toggle-block toggle-blocks-3"></span>
</label>
</div>
<nav id="menu" class="menu">
<ul id="modify" class="dropdown">
<li class="active"><a href="index.html">Home</a>
</li>
<li><a href="#">About</a>
<ul>
li><a href="about-us.html">TEIA</a></li>
<li><a href="services-1.html">Board Members</a></li>
<li><a href="services-2.html">Agenda</a></li>
<li><a href="our-event.html">Vision & Mission</a></li>
</ul>
</li>
<li><a href="#">Members</a>
<ul>
<li><a href="portfolio-overlay.html">Membership Type</a></li>
<li><a href="portfolio-classic.html">Code of Conduct</a></li>
<li><a href="portfolio-overlay.html">Membership Benefits</a></li>
<li><a href="portfolio-classic.html">Register/Join</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="blog.html">Upcoming Events</a></li>
<li><a href="blog-grid.html">Previous Events</a></li>
<li><a href="single-blog.html">Press Release</a></li>
<li><a href="single-blog.html">Gallery</a></li>
</ul>
</li>
<li><a href="contact-us.html">Contact Us</a></li>
<li class="nyan" style="background-color: #00bfff; color: white !important; "><a href="#">Log In</a>
<ul>
<li class="sss"><a href="admin">Admin</a></li>
<li><a href="members">Member</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- site-navigation end-->
</div>
</div>
</div>
</div>
</div>I previously had another piece of JavaScript code that made the navbar shrink on scroll, but I removed it since I didn't want that functionality. The old code snippet looked like this:
$(window).scroll(function(){
if ( matchMedia( 'only screen and (min-width: 1200px)' ).matches )
{
if ($(window).scrollTop() >= 30 ) {
$('.ttm-stickable-header').addClass('fixed-header');
$('.ttm-stickable-header').addClass('visible-title');
}
else {
$('.ttm-stickable-header').removeClass('fixed-header');
$('ttm-stickable-header').removeClass('visible-title');
}
}
});