I've implemented a sticky header using CSS and JavaScript along with a mega menu. However, I've encountered an issue where when scrolling to the bottom and clicking on the "more" link in the dropdown, the page scrolls back to the top. This is the affected code snippet:
If you want to take a closer look at the issue, you can visit this link:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".header-container").addClass("small");
} else {
$(".header-container").removeClass("small");
}
});
$('.more').click(function(){
$(this).toggleClass('active');
$('.slide-down').toggle();
});
<div id="header-container" class="container-fluid header-container">
//** Nav Menu
<div class="row">
<div class="col-12">
<ul class="quick-links">
<li class="quick-link">
<a href="#" class="link">News</a>
</li>
<li class="quick-link">
<a href="#" class="link">Videos</a>
</li>
<li class="quick-link">
<a href="#" class="link">Reviews</a>
</li>
<li class="quick-link">
<a href="#" class="link">Wikis</a>
</li>
<li class="quick-link more">
<a href="#" class="link">More
<i class="fa fa-caret-down"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
... (the rest of the HTML content remains as it is)