0

I want to execute my function when I either scroll past or load $("yt-next-continuation"), this div is basically the extra videos that YouTube loads when you scroll to the bottom of the page. What is the easiest way to do this?

What I basically want to do is, add overlay over the thumbnails when youtube loads in more videos when you scroll down their page. Atm my code is running when I first refresh their site, but not when more videos load in.

Xardas105
  • 85
  • 13
  • I would recommend providing more details about your existing code, e.g. js and html code samples, this will increase a chance of getting a good answer. – mikhail-t Mar 09 '18 at 19:29
  • My code works fine, but Im looking to execute my current code when youtube loads in more videos when you scroll down their page. I edited in more details on my post anyways. – Xardas105 Mar 09 '18 at 20:13

2 Answers2

0

Please take a look at those two questions:

Get the scrolltop of the element

How to detect scroll position of page using jQuery

As described you can get the top position of the element by:

$('#yourElement').offset().top;

And your current locations with:

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
});

So just do this:

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if( scroll > $('#yourElement').offset().top ){
        $("body").addClass("youReachedTheElementsPosition");
    }else
        $("body").removeClass("youReachedTheElementsPosition");
    }
});

And use some CSS to do whatever you like doing:

.youReachedTheElementsPosition span{color:red;}

You can add animations by using transitions.

.youReachedTheElementsPosition span{transform: color 0.3s ease;}
Noel Schenk
  • 724
  • 1
  • 8
  • 19
  • The problem with this, is that it triggers too often. It triggers everytime I scroll just a tad. – Xardas105 Mar 08 '18 at 17:18
  • I see, the issue with this code is that it only gets triggered when i'm at the bottom of the page, but it wont trigger underways because of youtube's dynamic system – Xardas105 Mar 08 '18 at 17:27
0

can use scroll magic to esecute event on div is visualized on page. also can use this function.

$(window).scroll(function () {
  isScrolledIntoView($("#yt-next-continuation"));
});

function isScrolledIntoView(elem) {
  var $elem = $(elem);
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window[0].innerHeight;

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

the function return true if div is displayed and can execute anything function on return true.

Pasquale De Lucia
  • 190
  • 1
  • 1
  • 12