通过滚动某个点来触发HTML事件，然后通过向后滚动来重新触发

Question

一旦我滚过一个点，我想触发淡入淡出，但是一旦我向后滚动，我就会淡入淡出。 我是在正确的轨道上吗？我不明白为什么它不起作用。到目前为止它似乎在任意点淡出，然后再也不会消失。

由于

$(document).ready(function(){

        $(window).scroll(function(){
            if($(window).scrollTop() > 20) {
                $( "h1" ).fadeTo( "slow", ".05" );
            }
        });

        $(window).scroll(function(){
            if($(window).scrollTop() <= 20){
                $( "h1" ).fadeTo( "slow", "1" );
            }
        });
    });    

Answer 1

尝试

$(document).ready(function () {

    var flag = $(window).scrollTop() > 20 ? 1 : 2;
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > 20 && flag != 1) {
            $("h1").fadeTo("slow", ".05");
            flag = 1;
            console.log('t1')
        } else if (scrollTop <= 20 && flag != 2) {
            $("h1").fadeTo("slow", "1");
            flag = 2;
            console.log('t2')
        }
    });

});

Answer 2

试试这个

$(document).ready(function(){
      $(window).scroll(function(){
          if($(window).scrollTop() > 20) {
              $( "h1" ).fadeTo( "slow", ".05" );
          }
          else if($(window).scrollTop() <= 20){
              $( "h1" ).fadeTo( "slow", "1" );
          }
      });
});