Fade out on scroll up

Question

I am trying to make a div fade out when scrolled up. If you look at envato.com when you scroll down the about info fades in and then fades out when you scroll back up. Right now I am using the js below to make the fade in effect, but I'm not sure how to make the div fade out.

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

score 0 · Answer 1 · answered Oct 15 '16 at 03:17

I would just add an else statement to your code which changes the opacity back to 0, this way everytime the if statement is false, aka the user scrolled up after the div appeared it will disappear again, and then reappear. like so:

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

    });
});

score 0 · Answer 2 · edited May 23 '17 at 12:06

$(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

Fade out on scroll up

2 Answers2