Fade in an Item on Scroll Bottom

[WaydeWait]

Hi,

I’m trying to make the most bottom item fade in and out if the user scrolls to the bottom of the browser window.

I found this working code, but it doesn’t seem to work with objects in readymag that all have absolute postion.

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      
      /* 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);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});

Is it possible to solve this somehow?

[neueMeta]

I changed your code a bit. $(window).on("load… will not fire at the desired time. easiest workaround is here to set an delay, so that all elements are loaded. Also you have to adress the elements. in your example the elements that shall be fading have the class .fade assigned. In my example I set up a variable with an array of data-id elements. there you have to insert your specific data-ids.

Also this only works if you have the vertical page alignment checked. To bring it to work in horizontal-page-order mode you have to change the scroll container from

$(window).scroll(function() {

… to something like:

$(“.content-scroll-wrapper”).scroll(function() {

as this is the div that is gone be scrolled. But in lack of time I couldn´t make it work properly. So you might dig into it on your own.

But here is the code for vertical-page-order, that should work:

<script>

     setTimeout(function() {
    //add your data-ids!
     var elementstofade =  $('[data-id=5e130ef5656c861c855ab4b2],[data-id=5e12fee91250df0e35ba77e1]');
   
   
    $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    elementstofade.each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      
      /* 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(800,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(800,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
   
   }, 2000);  
   
});
  
  </script>
  

[WaydeWait]

Thank you for having a look at this

However the code doesn’t seem to work. The div is that I’m trying to fade in when the user scrolls to the bottom of the vertical page is a logo that has a fixed position - it’s fixed to the bottom of the window. Could this be the reason?

[neueMeta]

yes. what if you unfix it and place it at the end of the page? why does it has to be fixed?

[WaydeWait]

Cause it’s a logo of the website, but instead of being at the top of the window it is placed at the bottom

There 15 separate web pages, if I place it at the end of each page i would need to upload logo to every page individually.

I set it fixed position and show in every page.

[neueMeta]

I see. Why don´t you just add an on scroll animation with a delay of your page height? After for example 6000px change opacity to 100.

[WaydeWait]

Each of 15 pages has a different height because of the different amount of content.

[neueMeta]

ok… option #1, which is a RM only solution:
copy and paste the logo on each page and set manually the fadein animation.

option #2
custom code workaround.
To detect if the user has reached the end of the page you can place a custom-code-widget at the end if the page. This custom code widget should have an onscroll animation with opacity, like:

Go inside the widget code and check:

Also paste in the following code, which checks on “scroll” if the customcodewidget has the opacity of 1 or 0 and regarding this, changes the opacity of the logo:

<div style="background-color: #FBD603; height:100%;" id="endofpagetrigger"> </div>


<script>
    
   setTimeout(function() {
  
    $(".accelerated-scroll").on('scroll',function() {
      
  		console.log("scroll");
      
		if( $('#endofpagetrigger').parent().parent().css('opacity') == '1') {
    
    		$('img[alt="logo"]').fadeIn();
          
  		}

  		if( $('#endofpagetrigger').parent().parent().css('opacity') == '0') {
  	
     		$('img[alt="logo"]').fadeOut();

  		}
  
  		else {}

	
  	});
  
  
  }, 500);  
  
</script>

<style>
  img[alt="logo"] {
  display:none;
  }
</style>

Now zoom out and place the widget-code outside of the viewable area at the end of the page, and copy/paste the whole widget onto the end of all other pages, like:

Now lets have a look on the logo:
In my example I set up logofile as a picture-widget and added an alt tag with “logo”. The logo is fixed above all pages:

*this is a kind of hacky workaround, but which might be not too confusing in terms of using code. if I would develop this I would go for a pure and cleaner java/jquery solution, which isn´t mixing RM animations and customcode.

[WaydeWait]

Thanks, for your support!