Question

您好我有一个网站，用户可以水平滚动而不是垂直滚动。当有人滚动或点击向右箭头时，我有一个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();

      }
});



});

Answer 1

答案在这里： Detect end of horizontal scrolling div with jQuery

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

到达页面开始时，Jquery淡入div

1 个答案: