javascript - jQuery:动画如果其他滚动功能

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;
    }
});

做了一个 fiddle :http://jsfiddle.net/filever10/z5D4E/