I'm attempting to create a fixed navigation with anchor links that scroll smoothly to the designated section. The challenge lies in the fact that my navigation is positioned near the bottom of the screen. As a result, when the user scrolls down and the navigation receives a 'fixed' class, clicking on an anchor link causes the script to scroll too far to the anchor block. I've tried adjusting the offset of the nav by the height of the navigation itself, which somewhat solves the issue, but requires clicking twice on the same link for it to work properly.
To better illustrate the issue, I've prepared a Fiddle -> Fiddle
My assumption is that the scrollTo function and fixing the nav simultaneously might be causing conflicts. Does anyone have insights into what could be causing this problem?
The code structure is as follows:
<div class="anchor-links">
<div class="anchor-wrapper">
<ul class="nav-list">
<li><a href="#description" class="goSmoothly">Product information</a></li>
<li><a href="#bundles" class="goSmoothly">Product bundles</a></li>
<li><a href="#reviews" class="goSmoothly">Reviews</a></li>
<li><a href="#related" class="goSmoothly">Related products</a></li>
</ul>
</div>
</div>
<div id="description" class="block">description</div>
<div id="bundles" class="block">bundles</div>
<div id="reviews" class="block">reviews</div>
<div id="related" class="block">related</div>
var fixmeTop = $('.anchor-links').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop){
$('.anchor-links').addClass("sticky");
} else {
$('.anchor-links').removeClass("sticky");
}
});
$('.goSmoothly').click(function(event){
event.preventDefault();
$(this).addClass('active');
$('html,body').animate({
scrollTop: $(this.hash).offset().top - 100
}, 500);
});