2016-10-15 7 views
0

スクロールアップ時に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); 

       } 
      }); 

     }); 
    }); 

答えて

0

私はこの方法では、毎回の文がfalseの場合、ユーザー別名、その後のdivは、それが再び消えます登場後にスクロールアップ、及び、バック0に不透明度を変更し、あなたのコードにelseステートメントを追加します再び現れます。そのような:

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

    }); 
}); 
0
$(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> 

Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

関連する問題