Question

我设置了滚动功能，所以当窗口滚动超过50px时，.header-wrap div的动画高度为140px到70px，理想情况下应该会发生什么从顶部向后滚动小于50px，.header-wrap div应该从70px动画回140px，但此功能似乎无法正常工作：
jsFiddle：http://jsfiddle.net/ub8Rb/

HTML：

<div class="header-wrap">hello</div>
<div class="scroll"></div>

CSS：

.header-wrap {
    position: fixed;
    width: 100%;
    height: 140px;
    top: 0;
    left: 0;
    text-align: center;
    background-color: #999;
    z-index: 9999;
}
.scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4000px;
}

jQuery的：

$(document).scroll(function () {
    if (window.scrollY > 50) {
        $(".header-wrap").animate({
            height: "70px"
        }, 500);
    } else {
        $(".header-wrap").animate({
            height: "140px"
        }, 500);
    }
});

这个函数似乎没有像我上面描述的那样工作，也没有动画div的高度取决于窗口滚动的距离。任何建议都非常感谢！

Answer 1

这个很顺利......

var go = true;
$(window).scroll(function() {
    if ($(this).scrollTop() > 50 && go) {
        $(".header-wrap").stop().animate({height:'70px'}, 500);
        go = false;
    } else if ($(this).scrollTop() < 50 && !go) {
        $(".header-wrap").stop().animate({height:'140px'}, 200);
        go = true;
    }
});

做了一个小提琴：http://jsfiddle.net/filever10/z5D4E/

Answer 2

这可能是动画冲突的问题，因为如果你慢慢滚动你的例子是有效的。设置触发器以确定何时/是否播放高度动画应该纠正冲突。以下是此工作的一个示例：

http://jsfiddle.net/ub8Rb/18/

var sizeTrigger = 'tall'; 

$(document).scroll(function () { 
    console.log(window.scrollY);
    if (window.scrollY > 50 && sizeTrigger == 'tall') {        
        $(".header-wrap").animate({
            height: "70px"
        }, 500, function() { 
            sizeTrigger = 'small'; 
            console.log(sizeTrigger);
        }); 
    } else if (window.scrollY < 50 && sizeTrigger == 'small') {
        $(".header-wrap").animate({
            height: "140px"
        }, 500, function() { 
            sizeTrigger = 'tall';
            console.log(sizeTrigger);
        });
    }
});

Answer 3

在您的代码stop()中添加$(".header-wrap").stop().animate，这会停止当前正在执行的任何动画。这是一个带有修改过的代码的JSFiddle：>>>CLICK HERE<<<

Answer 4

您的滚动功能会快速激活，尝试执行animate()功能，将其添加到浏览器的内存中。如果您等待足够长的时间，队列将到达结尾，您的动画将按预期工作。

简单的解决方案，在stop(true, false)

前添加animate()

API： http://api.jquery.com/stop/

如果要控制延迟，可以使用包装函数捕获重复事件。

var headerwrap = $(".header-wrap"),
    delayedEvent = (function () {
        var timers = {};

        return function (callback, delay, id) {
            delay = delay || 500;
            id = id || "duplicated event";

            if (timers[id]) {
                clearTimeout(timers[id]);
            }

            timers[id] = setTimeout(callback, delay);
        };
    })();

$(document).scroll(function (ev) {
    delayedEvent(function () {
        var h = (window.scrollY > 50) ? 70 : 140;
        headerwrap.stop(true, false).animate({ height: h }, 500);
    }, 500, "scroll event");
});

FIDDLE： http://jsfiddle.net/tive/QskJm/

jQuery：animate if else滚动功能

4 个答案: