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