Upon revisiting the question, it appears that the issue may lie in not stopping the animation when the user scrolls back above 175px.
It seems like you are using position: float on your navigation element. Have you considered removing the float as soon as the user scrolls up?
You could experiment with setting the queue option to false (refer to https://api.jquery.com/animate/) so that the animation does not wait for others to complete.
Have you thought about replacing the JQuery animation with CSS transitions instead?
Perhaps this approach might work:
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have a similar setup in my Work In Progress. I've made some minor edits before sharing it here, hoping it could benefit you as well.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Instead of using .removeAttr('style'), consider resetting to the original value by inputting '' (empty string) in the JQuery css function. Additionally, you might want to reconsider the use of the 'scrolled' boolean variable and its necessity based on the scrolling behavior.