Question

我正在尝试创建一个jquery动画，当我向下滚动时，我希望我的标题隐藏（margin-top变为负数），并在我开始向上滚动时重新出现。到目前为止我能够做到这一点，但问题是动画需要时间才能开始！

这是我的js代码：

$(function(){
    headerOrgOffset = $('#topnav').height()
});

$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
    if (currentScroll > previousScroll) {
        $("#header-wrap").animate({marginTop:'-40px'},200);
    } else {
        $("#header-wrap").animate({marginTop:'0px'},200);
    }
} 
previousScroll = currentScroll;
});

我为此

创建了fiddle

我该如何解决这个问题？

谢谢！

Answer 1

您需要注意滚动事件在滚动时会连续触发，而不仅仅是向下滚动一次，向上滚动一次。所以你必须确保你只在每个方向发射一次动画。

我已修改你的代码来做这件事现在它对我来说效果很好，它使用一个名为hidden的变量来记录隐藏的标题，可见。并且只在每个方向发射一次动画。

$(function(){
    headerOrgOffset = $('#topnav').height()
});

var hidden = false;
var previousScroll = 0;

$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
    if (currentScroll > previousScroll && !hidden ) {
        hidden = true;
        $("#header-wrap").animate({marginTop:'-40px'},200);
    } else if( currentScroll <= previousScroll && hidden) {
        hidden = false;
        $("#header-wrap").animate({marginTop:'0px'},200);
    }
} 
    previousScroll = currentScroll;
});

jsfiddle

Answer 2

这与murdoch的答案类似，假设通过说动画开始很慢，你要么想要动画很快，要么你想让它在你开始滚动的那一刻开始，我做了这个 FIDDLE：

var prevScroll;
var hidden = false;

$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (prevScroll) {
    if (currentScroll < prevScroll && hidden) {
        $("#header-wrap").animate({
            marginTop: '0px'
        }, 0);
        hidden=false;

    } else if (currentScroll > prevScroll && !hidden) {
        $("#header-wrap").animate({
            marginTop: '-40px'
        }, 0);
        hidden=true;
    }
} else if(!hidden){
$("#header-wrap").animate({
        marginTop: '-40px'
    }, 0);
    hidden= true;
}
prevScroll = currentScroll;
});

Answer 3

您需要先初始化previouscroll = 0。只有这样滚动事件才会在第一次滚动窗口时考虑previousscroll

http://jsfiddle.net/S8gHm/6/

jQuery .animation（）延迟启动

3 个答案: