Jquery fade div in when reached beginning of page

Question

Hi i have a website where a user can scroll horizontally instead of vertically. When someone scrolls or click the right arrow to the right i have a div that stays as a background image that fades out, but when you scroll to the left without reaching the beginning of the page the background would fade in.

I need help in getting the div(#bgvid) to fade in when the user reaches the beginning of the page.

This is my current code

    $(document).ready(function() {
var distance = $('#bgvid').offset().left;
    var left = $(window).scrollLeft();


    var $item2 = $('div.inner-group-container'), //Cache your DOM selector
    visible2 = 1, //Set the number of items that will be visible
    index2 = 0, //Starting index
    endIndex2 = ( $item2.length ); //End index
    var w = $("div.inner-group-container").width();

$('#arrowR').click(function(){
      index2++;
      $item2.animate( { scrollLeft: '+=' + w + 'px'}, 800 );
      $("#bgvid").fadeOut();
});


$('#arrowL').click(function(){
    if(index2 > 0){
      index2--;
      $item2.animate( { scrollLeft: '-=' + w + 'px'}, 800 );
    }


    if ( left >= distance ) {
       $("#bgvid").fadeIn();
    }


});



$(window).bind('mousewheel', function(event) {
    var scroller = $('body').scrollLeft();


    if (event.originalEvent.wheelDelta >= 0) {

      console.log(distance);
      console.log(scroller);

      if ( scroller == distance ) {
             $("#bgvid").fadeIn();
      }


      if(index2 > 0){
        index2--;            
        $item2.animate( { scrollLeft: '-=' + w + 'px'}, 800 );
      }

      }else {
          $item2.animate( { scrollLeft: '+=' + w + 'px'}, 800 );
          index2++;
          $("#bgvid").fadeOut();

      }
});



});

Answer 1

The answer is here: Detect end of horizontal scrolling div with jQuery

if ( $(document).scrollTop() == ( $(document).height() - $(window).height() ) {
  // Do something here ...
}