Currently, I am developing a simple website with JQuery's ScrollTop functionality for the top navigation bar. However, I encountered a specific issue that I can't resolve.
When scrolling down past 50 pixels, the navbar shrinks as intended. But the problem arises when scrolling back up to the top. I implemented an else statement in my code to animate the navbar back to its original size if the scroll position is less than 50. While it does work, there is a noticeable delay of about 10 seconds after reaching the top. I'm baffled as to what could be causing this delay.
This is the JQuery code snippet I'm using:
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.co_name').animate({ fontSize: '22pt', paddingTop: '18px', paddingBottom: '0px'}, 530);
} else {
$('.co_name').animate({ fontSize: '40pt', paddingTop: '80px', paddingBottom: '75px'}, 530);
}
});
Although I don't see any issues with this code (given my limited experience with ScrollTop), you can view the entire functioning site at studionice.co/u/flatresponsive.
Does anyone have insights on what might be causing this delay?
Additionally, at times, the initial animation gets delayed when scrolling down. I've worked with JQuery before, and animations are usually swift. Could the delay be due to the additional scripts like Font Awesome, Bootstrap, and Flat UI integrated into my source code?