0

我设置了一个滚动功能，所以当窗口滚动超过 50px 时， div 会从to.header-wrap的高度开始动画，理想情况下应该发生的情况是当你从顶部向后滚动不到 50px 时， div 应该从to动画回来但是这个函数似乎无法正常工作： jsFiddle：http: //jsfiddle.net/ub8Rb/ HTML：140px70px.header-wrap70px140px


<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 的高度取决于窗口滚动了多远。任何建议都非常感谢！

4

4 回答 4

3

这个很流畅...

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/

于 2013-10-26T02:02:26.263 回答
1

这可能是动画冲突的问题，因为如果您缓慢滚动，您的示例将起作用。设置触发器以确定何时/是否播放高度动画应该可以纠正冲突。这是此工作的示例：

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);
        });
    }
});
于 2013-10-26T01:46:38.123 回答
1

将 a 添加stop()到您的代码中$(".header-wrap").stop().animate，这将停止任何当前正在执行的动画。这是一个带有修改后代码的 JSFiddle： >>>点击这里<<<

于 2013-10-26T01:59:07.457 回答
1

发生的情况是您的滚动功能将快速触发，尝试执行该animate()功能，这会将它们添加到浏览器的内存中。如果您等待的时间足够长，队列将到达末尾，您的动画将按预期工作。

简单的解决方案，stop(true, false)在前面添加animate()

接口： 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");
});

小提琴：http : //jsfiddle.net/tive/QskJm/

于 2013-10-26T02:01:19.763 回答