javascript - 向上滚动时淡出

Question

我试图让 div 在向上滚动时淡出。如果您在向下滚动时查看 envato.com，关于信息会淡入，然后在您向上滚动时淡出。现在我正在使用下面的js使淡入淡出效果，但我不确定如何使div淡出。

$(function() {
  $(window).scroll( function(){
    $('.fadeInBlock').each( function(i){   
      var bottom_of_object = $(this).position().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it  */
      bottom_of_window = bottom_of_window + 350;  

      if ( bottom_of_window > bottom_of_object ) {
        $(this).animate({'opacity':'1'},500);
      }
    }); 
  });
}); 

Answer 1

我只是在您的代码中添加一个 else 语句，将不透明度更改回 0，这样每次 if 语句为假时，也就是用户在 div 出现后向上滚动它会再次消失，然后重新出现。像这样:

$(function() {
  $(window).scroll( function(){


   $('.fadeInBlock').each( function(i){

    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it  */
    bottom_of_window = bottom_of_window + 350;  

    if( bottom_of_window > bottom_of_object ){

        $(this).animate({'opacity':'1'},500);

            }
            else{
              $(this).animate({'opacity':'0'},500);
            }
        }); 

    });
});