淡入滾動

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語句為false時，也就是在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);
            }
        }); 

    });
}); 

Answer 2

$(window).on("load",function() {
  $(window).scroll(function() {
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      var windowBottom = $(window).scrollTop() + $(window).innerHeight();

      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
      }
    });
  }); $(window).scroll(); //invoke scroll-handler on page-load
});

---

.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  opacity: 1;
}

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div>
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
</div>

根據窗口中的元素位置，向下滾動時淡入，向上滾動時淡出