Javascript Jquery滚动淡出

我正在使用jQuery插件。当我向下滚动时，淡出效果起作用，但当我向后滚动到顶部时，它不会再次显示我的div标题 我需要更改什么才能使div再次出现

JQUERY

---

首先，我不明白为什么要用if-else-if语句来表示相同的条件。 无论如何，我建议你给标题显示：无；使用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这两种方法。

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

在这个答案中，我不再依赖jQuery插件的视口选择，而是使用纯jQuery。我放弃了这种依赖性，因为它不能像您预期的那样工作，只是增加了所需逻辑的复杂性

我们需要的是一个用于scroll的事件处理程序，它将节点设置为在特定点后向下滚动时淡出，以及在到达特定点后向上滚动时淡出

在注释中提供的代码中，您几乎正确地找到了特定点的部分，但您忘记或没有意识到核心部分：检测何时向下滚动和何时向上滚动

下面是代码：

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进行比较，然后知道如果last大于实际值，何时上升；如果last小于实际值，何时下降

另外，我设置了两个变量来更改scrollTop值，使其成为淡出或淡出。我认为答案上的值与制作网站上的预期效果相匹配

最后还有另一个细节，我们需要在添加新的oposite效果之前删除oposite效果的类别

我希望你能理解一切，但如果有什么事情没有很好地解释或什么，请让我们知道

---

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

我不确定你想要什么@CodeiSir我的问题是在滚动时没有显示我的元素，这可能是因为您没有删除类fadeout，而是使用show。也许你不需要给你制作的物品设置淡出类，而是调用淡出类，然后在你想要的时候让它再次显示。另外，您对淡出和显示都使用了相同的选择器，这闻起来像是一个错误。。。也许我的眼睛工作不好，但是，如果和else if语句有相同的条件，那么它们不仅仅是无用的？@frikinside什么东西不是无用的？问题是当我向上爬时，它隐藏了我的标题为什么？你能更好地解释你想做什么吗？是否要隐藏和显示标题？例如，当滚动距离顶部超过100px时？抱歉，这只是为了理解。抱歉，代码笔链接不起作用。试着看看这篇文章，也许你会找到你需要的。你能试一下2个元素吗？试一下3个div，但当我滚动时，它都消失了down@achrafbans我想我不知道你指的是什么，你能解释一下你所提供的解决方案面临的问题吗？什么东西没有按预期工作？

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