I am currently working on designing a single-page website that consists of multiple sections. However, I am encountering an issue where clicking on a navigation bar link causes the page to scroll to the desired section but covers some content in the process.
The problem arises from the fact that the navigation bar only receives static positioning once it scrolls past its original position. You can view my development site at
Below is the code snippet that attempts to add fixed positioning using JQuery. Despite offsetting it by -50px to account for the nav size, the issue persists.
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top - 50}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
If you have any insights or suggestions on how to resolve this issue, please feel free to share them. Any assistance would be greatly appreciated.