使用 jQuery 滚动动画

Posted 2023-05-08

【中文标题】使用 jQuery 滚动动画

【英文标题】：Animate on scroll with jQuery

【发布时间】：2013-07-08 11:55:35

【问题描述】：

好的，我在尝试使用滚动事件上的条件为 DOM 的多个元素设置动画时遇到了一个问题。 首先，我使用的是 Drupal 7，所以我使用的 jQuery 库是 1.4.4 版本。

现在，当页面向下滚动时，我想通过更改其中元素的 css 属性来缩小标题的大小。

首先，在滚动事件中，我检查窗口的 scrollTop 位置。如果位置不是 0（意味着页面向下滚动），我会在页眉内的元素上触发动画。

如果位置等于 0，我希望 css 属性回退到其原始状态，以便标头检索其完整大小。

动画的第一部分效果很好。当我向下滚动页面时，标题按预期缩小。但是当我将页面滚动回顶部时，第二个动画不起作用..动画都是错误的，并且会在几秒钟后发生并且变得疯狂，来回更改受 animate() 函数影响的 css 属性。

有人知道如何清除这个吗？？

这是我正在使用的代码的简化部分：

$(window).scroll(function()            

    if($(window).scrollTop() != 0)
        $('#myFirstElement').animate(marginTop: '20px', 300);
        $('#mySecondElement').animate(top: '20px', 300);
           
    else 
        $('#myFirstElement').animate(marginTop: '32px', 300);
        $('#mySecondElement').animate(top: '32px', 300);
    

);

【参考方案1】：

你可以使用类似的东西

http://jsfiddle.net/HjFH4/

$elem1 = $('#myFirstElement');
$elem2 = $('#mySecondElement');
var scrollState = 'top';

$(window).scroll(function() 

    var scrollPos = $(window).scrollTop();

    if( ( scrollPos != 0 ) && ( scrollState === 'top' ) ) 
        $elem1.stop().animate(marginTop: '0px', 300);
        $elem2.stop().animate(height: '10px', 300);
        scrollState = 'scrolled';
           
    else if( ( scrollPos === 0 ) && ( scrollState === 'scrolled' ) ) 
        $elem1.stop().animate(marginTop: '32px', 300);
        $elem2.stop().animate(height: '80px', 300);
        scrollState = 'top';
    

);

【讨论】：

是的，绝对适合我。 sdespont 的回答改善了动画的行为，但是在滚动滚动时我仍然有错误。我想有什么不同，是 stop() 函数。非常感谢 Dom Day 和你们三个快速有效的回答！

感谢您的大开眼界。我使用滚动位置和状态的组合来做到这一点...jsfiddle.net/nMcxQ/1808

【参考方案2】：

问题是scroll 事件在用户滚动操作期间发生了很多次。 并且每次都要求 JQuery 启动动画。

您应该只在需要时制作动画：

var smallMenu = false;

$(window).scroll(function()            

    if($(window).scrollTop() !== 0)
    
        if(smallMenu === false)
         
            smallMenu = true;
            $('#myFirstElement').stop().animate(marginTop: '20px', 300);
            $('#mySecondElement').stop().animate(top: '20px', 300);
        
           
    else 
    
        if(smallMenu === true)
         
            smallMenu = false;
            $('#myFirstElement').stop().animate(marginTop: '32px', 300);
            $('#mySecondElement').stop().animate(top: '32px', 300);
        
    
);

【讨论】：

现在这是一个快速的好结局！感谢千千万万次的sdespont，它完美无缺！

【参考方案3】：

尝试使用.data 或其他东西来保存动画的状态，并且仅在状态与您想要的相反时对其进行动画处理。

$(window).scroll 在您滚动时反复触发。查看http://api.jquery.com/scroll/底部的实时示例

所以在我看来，在滚动时，顶部不为零，它实际上是在排队大量动画事件，当您向上滚动时会导致冲突。