javascript - jQuery Overflow: Hidden on Parent, Detect if Child is Actually On Visible -

i'm having issue jquery blowing mind. i've tried 3 different js , jquery functions people suggested online accomplishing , can't seem work.

i'm trying hide class .arrow-up when .first visible on screen , hide class .arrow-down when .last visible on screen.

sounds simple enough, right?

well parent element has overflow: hidden on (like carousels–they hell). know how this? i'd appreciate help, js isn't strongest means...

here's current jquery–

jquery(document).ready(function ($) {         $(".arrow-down").bind("click", function (event) {             event.preventdefault();             $(".vid-list-container").stop().animate({                 scrolltop: "+=300"             }, 300);          });         $(".arrow-up").bind("click", function (event) {             event.preventdefault();             $(".vid-list-container").stop().animate({                 scrolltop: "-=300"             }, 300);         });  }); 

in this, .vid-list-container parent overflow: hidden on , .first , .last both inside container. arrow classes both outside of container.

built pen wants play around it. http://codepen.io/seancrater/pen/wapnew

thanks!

this should work. notice used opacity:0, arrow can still clicked. need change that!

function checkdownarrow() {   settimeout(function() {        if($(".vid-list-container").scrolltop() != 0){           $('.arrow-up').css('opacity',1);         }       if(($(".vid-list-container").scrolltop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) {           $('.arrow-down').css('opacity',0);         }       },350);  }  function checkuparrow() {  settimeout(function() {        if($(".vid-list-container").scrolltop() == 0){           $('.arrow-up').css('opacity',0);         }       if(($(".vid-list-container").scrolltop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) {           $('.arrow-down').css('opacity',1);         }       },350);  }  checkdownarrow();  checkuparrow();  jquery(document).ready(function ($) {         $(".arrow-down").bind("click", function (event) {             event.preventdefault();             $(".vid-list-container").stop().animate({                 scrolltop: "+=173"             }, 300);            checkdownarrow();          });         $(".arrow-up").bind("click", function (event) {             event.preventdefault();             $(".vid-list-container").stop().animate({                 scrolltop: "-=173"             }, 300);             checkuparrow();         });  });