基于不同滚动位置的动画标题

Question

目前我有一个标题，在滚动一定数量的像素后，它会动画（挤压）到具有不同徽标和不同导航的较小版本。如果用户向上滚动超过该像素量（在本例中为 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;
    }
});

有人可以帮我解决这个问题，这让我发疯了！提前致谢

Answer 1

我想你在找jQuery Debounce

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

基本上，这将使您的函数被调用的速度不会超过您设置的限制。所以你可以这样做（取自 https://stackoverflow.com/a/9144827/2687861），这将 $('#scrollMsg').html('SCROLLING!'); 限制为每 250 毫秒调用一次。

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

一些轻松的阅读。 http://davidwalsh.name/javascript-debounce-function