2016-03-28 76 views
0

您好我有一個網站,用戶可以水平滾動而不是垂直滾動。 當某人滾動或點擊右側的向右箭頭時,我有一個保留爲淡出的背景圖片的div,但當您滾動到左側而未到達頁面的開頭時,背景將淡入。當到達頁面開頭時Jquery淡入div

當用戶到達頁面的開始時,我需要幫助讓div(#bgvid)淡入。

這是我當前的代碼

$(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(); 

     } 
}); 



}); 

回答