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