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

Posted 2023-05-08

【中文标题】基于不同滚动位置的动画标题

【英文标题】：Animate Header based on different scroll positions

【发布时间】：2015-08-17 00:32:58

【问题描述】：

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

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

【参考方案1】：

我想你在找jQuery Debounce

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

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

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

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

【讨论】：

这有帮助，但现在每次我移动鼠标（每 250 毫秒）我的标题都会改变。我只希望它在向上滚动时扩展。有任何想法吗。感谢您的帮助！

您提供的代码中没有任何内容会导致您的on scroll 函数在鼠标移动时触发。如果您提供完整的代码，我可能会弄清楚那部分。我创建了一个你试图达到的效果的工作小提琴jsfiddle.net/wfp2uhjb/1 请注意第一个 if 语句中的额外语句scrollPosition > lastScrollTop。这是在向上滚动时防止标题“挤压”所必需的。