Question

我正在使用jQuery插件。当我向下滚动时，淡出效果正在工作，但当我向后滚动到顶部时，它不再显示我的div（#header）为了让div再次显示，我需要更改什么？

JQUERY

$(window).scroll(function() {
    if ($('#header:above-the-top')) {
        $('#header').addClass('animated fadeOut');
        console.log('fadeOut');
    } else if ($('#header:above-the-top')) {
        $('#header').show();
        console.log('fadein');
    }
});

Answer 1

首先，我不明白为什么你使用if else if语句具有相同的条件。无论如何，我建议你给#header display：none;使用css并在使用JQuery管理fadeIn和Out之后。尝试以这种方式更改代码：

$(window).scroll(function() {
if ($('#header:above-the-top')) {
    $('#header').fadeOut(2000); //You can change the fadeOut parameter
    console.log('fadeOut');
} else if ($('#header:above-the-top')) {
    $('#header').fadeIn(2000);
    console.log('fadein');
}
});

或者，如果您希望在没有动画的情况下显示和隐藏div，则可以使用显示和隐藏方法。

$(window).scroll(function() {
if ($('#header:above-the-top')) {
    $('#header').hide(); //You can change the fadeOut parameter
    console.log('fadeOut');
} else if ($('#header:above-the-top')) {
    $('#header').show();
    console.log('fadein');
}

或者至少如果你想使用你必须删除的类并添加类来为它设置动画。记住两个方法hasClass（）和removeClass（）。

Answer 2

嗯，你总共提供了3个代码。一个问题，另一个在评论，最后另一个在生产网站上。有了这个和之前的评论，我想我知道你想做什么。

在这个答案中，我放弃了对Viewport selections for jQuery插件的依赖，而是使用 pure jQuery。我放弃了这种依赖性，因为它不能按预期工作，只是增加了所需逻辑的复杂性。

我们需要的是滚动的事件处理程序，在特定点之后向下滚动时将节点设置为fadeOut，在达到特定点之后向上滚动时淡入淡出

你几乎把特定点的部分与评论中提供的代码相提并论但你忘记了（或没有意识到）核心部分：检测何时向下滚动以及何时向下滚动向上滚动！

所以，这是代码：

var scrollTopStartFadeOut = 300; // In wich scroll position we are going to start fade Out
var scrollTopStartFadeIn = 720; // In wich scroll position we are going to start fade Out

var lastScrollTop = 0; //We set a variable to store the last scroll top
$(window).scroll( function(){
    var actualScrollTop = $(this).scrollTop(); 
    if (actualScrollTop >= lastScrollTop && actualScrollTop > scrollTopStartFadeOut){ // Is scrolldown and scrolltop is after the scrolltop for fadeout? Then, we fade out!
        $('#header').removeClass('fadeInUp').addClass('animated fadeOut');
        console.log('fadeOut');
    } 
    else if (actualScrollTop < lastScrollTop && actualScrollTop < scrollTopStartFadeIn){ // Is scrollup and scrolltop is before the scrolltop for fadein? Then, we fade in!
        $('#header').removeClass('fadeOut').addClass('animated fadeInUp');
        console.log('fadeInUp');
    }
    lastScrollTop = $(this).scrollTop(); // Updates the lastScrollTop
});

要检测（好的，基本的检测）何时向下滚动以及何时向上滚动，我们设置一个名为lastScrollTop的变量，我们将存储最后的scrollTop值。使用该值，我们可以将与实际的scrolltop进行比较，然后知道何时上升（如果最后一次大于实际）以及何时下降（如果最后一次低于实际）

另外，我设置了两个变量来更改scrollTop值以使 fadeOut 或 fadeIn 。我认为答案上的值与生产网站上的预期效果相符。

最后还有另一个细节可以使其工作，需要在添加新的之前删除对象的类别。

我希望你能理解一切，但如果有什么东西没有得到很好解释，请告诉我们！

我做了一个工作 jsFiddle 来显示效果：

Jquery滚动淡出

2 个答案: