2016-03-28 9 views
0

Hallo ich habe eine Website, wo ein Benutzer horizontal statt vertikal scrollen kann. Wenn jemand scrollt oder klicken Sie auf den Pfeil nach rechts nach rechts i ein Div, die als Hintergrundbild bleibt, die ausgeblendet wird, aber wenn man nach links scrollen, ohne den Anfang der Seite erreicht der Hintergrund würde verblassen in.Jquery Fade div in wenn erreicht Anfang der Seite

Ich brauche Hilfe, um das div (#bgvid) einzublenden, wenn der Benutzer den Anfang der Seite erreicht.

Dies ist mein aktueller 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(); 

     } 
}); 



}); 

Antwort