javascript - 滚动时淡出div并淡入其他div

Question

我有一些部分，例如:

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>

我尝试做的是，当我在 section1 中滚动时，它淡出而 section2 淡入。当我在 section2 中向下滚动时>，section3 淡入，当我向上滚动时 section1 淡入。

我用这个 JS 试过了:

var lastScrollTop = 0;
$("#section1").scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $(this).fadeOut();
        $("#section2").fadeIn();
   } else {

   }
   lastScrollTop = st;
});

var lastScrollTop = 0;
$("#section2").scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $(this).fadeOut();
        $("#section3").fadeIn();
   } else {
        $(this).fadeOut();
        $("#section1").fadeIn();
   }
   lastScrollTop = st;
});

var lastScrollTop = 0;
$("#section3").scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){

   } else {
        $(this).fadeOut();
        $("#section2").fadeIn();      
   }
   lastScrollTop = st;
});

但它只是保持正常滚动，没有任何 fadeIn() 或 fadeOut()。 有什么方法可以解决此问题或有更好的方法吗？

Answer 1

看看https://scrollrevealjs.org/它应该做你需要的。如果我做对了。