Javascript 根据不同的滚动位置设置标题动画

目前，我有一个标题，可以在滚动一定数量的像素后，将动画（挤压）转换为具有不同徽标和不同导航的较小版本。如果用户向后滚动超过该像素量（在本例中为170），报头将扩展回其正常状态。现在（因为站点上有一些很长的页面），我的客户端希望在用户向上滚动时，标题“展开”。我想我已经接近了，但当我开始向上滚动页面时，事件已经发生了无数次。以下是我当前的javascript：

function squishHeader() {
    compactHeader = true;
    header.animate({height: '48px'}, 500);
    mainNav.fadeOut("fast");
    logo.fadeOut("fast");
    scrollLogo.delay(300).slideDown("fast");
    if (overlayIsVisible == true) {
        overlay.fadeOut("slow");
        overlayIsVisible = false;
    }
}

function expandHeader() {
    compactHeader = false;
    header.animate({height: '130px'}, 100);
    scrollLogo.css("display", "none");
    logo.fadeIn("slow");
    mainNav.delay(300).fadeIn("fast");
}


var compactHeader = false;
var lastScrollTop = 0;
$(window).on('scroll', function() {

    if (win.width() > 1024) {
    scrollPosition = $(this).scrollTop();
        if (scrollPosition >= 170 && !compactHeader) {
            squishHeader();
        }
        else if (scrollPosition < 170 && compactHeader) {
            expandHeader();
        }
        else if ( scrollPosition < lastScrollTop && compactHeader){
            expandHeader();
        }
        lastScrollTop = scrollPosition;
    }
});

函数squishHeader（）{
compactHeader=true；
动画（{height:'48px'}，500）；
主导航淡出（“快速”）；
标志。淡出（“快速”）；
滚动标识。延迟（300）。向下滑动（“快速”）；
如果（可见==真）{
叠加。淡出（“慢”）；
可见=假；
}
}
函数expandHeader（）{
compactHeader=false；
header.animate（{height:'130px'}，100）；
css（“显示”、“无”）；
logo.fadeIn（“慢”）；
主导航延迟（300）.fadeIn（“快速”）；
}
var compactHeader=false；
var lastScrollTop=0；
$（窗口）.on（'scroll'，function（）{
如果（win.width（）>1024）{
scrollPosition=$（this.scrollTop（）；
如果（scrollPosition>=170&&！compactHeader）{
挤压头（）；
}
else if（滚动位置<170&&compactHeader）{
expandHeader（）；
}
else if（scrollPosition

---

有人能帮我做这个吗？我快疯了！提前谢谢

我想你在找

jQuery throttle/debounce允许您以多种有用的方式对函数进行速率限制。将延迟和回调传递给$.throttle将返回一个新函数，该函数将不超过每延迟毫秒执行一次。将延迟和回调传递给$.debounce将返回一个只执行一次的新函数，在开始或结束时将多个顺序调用合并为单个执行

基本上，这将防止调用函数的速度超过设置的限制。因此，您可以这样做（取自）限制

$（'#scrollMsg'）.html（'SCROLLING！'）仅每250毫秒调用一次

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING!');
}));

一些轻松的阅读
 这很有帮助，但是现在每次我移动鼠标（每250毫秒）我的标题都会改变。我只希望它在向上滚动时展开。任何想法。谢谢你的帮助！您提供的代码中没有任何内容会导致您的
on scroll
功能在鼠标移动时触发。如果你提供完整的代码，我也许能找出那一部分。我为您试图实现的效果创建了一个工作小提琴，请注意第一个if语句中的额外语句
scrollPosition>lastScrollTop
。这是必要的，以防止标题在向上滚动时“挤压”。