Question

当我从视口的最顶部滚动时，我正在使用$（window）.scroll为我网站的顶部标题设置动画。初始条件工作正常，我的所有animate（）效果都有效。问题是，当我滚动回到页面顶部时，标题不会动画回原始设置（有几次，但经过长时间停顿后）。

jQuery的：

var $headerBar   = $(".header"),
    $window    = $(window),
    offset     = $headerBar.offset(),
    topPadding = 0;

$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        //$headerBar.stop().animate({
            //marginTop: $window.scrollTop() - offset.top + topPadding
        //});

        console.log('Left the Top');

        // Add class 'fixed'
        $headerBar.addClass('moved');

        $('p.mainprinav_text').animate({ padding: '20px 45px 20px 0' });
        $('ul.mainprinavlist li a').animate({ padding: '20px 35px' });
        $('div.headerlogo').animate({ top: '6px' });
        $('div.headerlogo img').animate({ width: '90px' });
        $('body.site').animate({ paddingTop: '38px' });

    } else if ($window.scrollTop() <= offset.top) {
        //$headerBar.stop().animate({
            //marginTop: 0
        //});

        console.log('Back to Top');

        // Remove class 'fixed'
        $headerBar.removeClass('fixed');

        $('p.mainprinav_text').animate({ padding: '39px 45px 39px 0' });
        $('ul.mainprinavlist li a').animate({ padding: '39px 35px' });
        $('div.headerlogo').animate({ top: '13px' });
        $('div.headerlogo img').animate({ width: '120px' });
        $('body.site').animate({ paddingTop: '0' });
    }
});

Answer 1

问题

是没有什么可以阻止累积的。

如果您在每个.stop()之前添加animate(...)，那么它将阻止您遇到的队列累积，从而导致动画延迟。

赞in this fiddle...

虽然还有其他事情可以使这更好。你应该有一个开关，所以脚本的每个部分只触发一次，动画可以用css替换，这样你就可以切换一个类，整个事情可以用更少的代码来完成。

如果你对这些其他变化感兴趣，我可以做另一个小提琴来说明。

为什么反向动画（）不会马上开火？

1 个答案: