Question

目前我有一个标题，在滚动一定数量的像素后，动画（squishes）到具有不同徽标和不同导航的较小版本。如果用户向上滚动超过该像素量（在这种情况下为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

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

1 个答案: