0

How do I add a jQuery Event Listener that only shows a DOM element (in this case an iframe) only if the user has scrolled to the bottom of the page.

Andreas Daiminger
  • 69
  • 7
  • You can add event listeners using [`.on`](http://api.jquery.com/on/) and the event to listen to is `scroll`. Beside that you should at least show some code you tried here to get help. And a search on stackoverflow will also show questions like [How to show div when user reach bottom of the page?](http://stackoverflow.com/questions/2768264) or [Detecting when user scrolls to bottom of div with jQuery](http://stackoverflow.com/questions/6271237) – t.niese Oct 23 '15 at 14:13

1 Answers1

0
$(window).scroll(function(){
    if ($(document).scrollTop() + $(window).height() == $(document).height()) {
      $('iframe').fadeIn();
    } else {
      $('iframe').stop(true, true).fadeOut();
    };
});
Viktor Maksimov
  • 1,465
  • 1
  • 10
  • 11
  • Thanx. Great solution! Is it possible to make the transition look nicer? Is it possible to combine this with CSS transitons? – Andreas Daiminger Oct 23 '15 at 16:25
  • I've changed my answer with a fading effect to the iframe. Also it is possible to make $('iframe').addClass('shown'); and use css transitions to the shown class. If you like my answer please vote for it. – Viktor Maksimov Oct 23 '15 at 16:34
  • Thanks! Great answer! I keep voting for you. But I guess I need to earn more reputation first before my votes get publicly displayed. – Andreas Daiminger Oct 24 '15 at 18:22
  • I need to slightly modify your solution. Because I want the iframe to be constantly there once the user has reached the bottom the first time. – Andreas Daiminger Oct 24 '15 at 18:23
  • I tried doing that defining a variable bottomReached that I want to set to true once the user has reached the bottom the first time. But my code doesn´t work. – Andreas Daiminger Oct 24 '15 at 18:38
  • Thanks. But I already figured it out. Had to define the variable outside the function. – Andreas Daiminger Oct 24 '15 at 19:31