Подскажите, как можно вызвать функцию по скролу?

246

21 июня 2017, 02:49

У меня есть функция

(function($) {
  function generateBarGraph(wrapper) {
    // Set Up Values Array
    var values = [];
    // Get Values and save to Array
    $(wrapper + ' .bar, .bar2, .bar3').each(function(index, el) {
      values.push($(this).data('value'));
    });
    // Get Max Value From Array`введите сюда код`
    var max_value = Math.max.apply(Math, values);
    // Set width of bar to percent of max value
    $(wrapper + ' .bar, .bar2, .bar3').each(function(index, el) {
      var bar = $(this),
          value = bar.data('value'),
          percent = Math.ceil((value / max_value) * 100);
      // Set Width & Add Class
      bar.width(percent + '%');
      bar.addClass('in');
    });
  }
      // Generate the bar graph on window load...
  $( window ).scroll(function(wrapper) {
    generateBarGraph('#dashboard-stats');
  });
})(jQuery); // Fully reference jQuery after this point.

Она загружается сразу когда обновляешь страницу, а мне нужно что бы анимация происходила только когда когда я проскролю до блока с #dashboard-stats.

Answer 1

Определяем скролл экрана + его высоту и проверяем чтобы это было меньше позиции требуемого элемента. Так же чтобы предотвратить многочисленный вызов сетаем, что он был вызван.

$(window).scroll(function() { 
  if ($(window).scrollTop() + $(window).height() > $('#dashboard-stats').offset().top && 
    !$('#dashboard-stats').data('triggered')) { 
    $('#dashboard-stats').data('triggered', true); 
    generateBarGraph('#dashboard-stats'); 
  } 
  if ($(window).scrollTop() + $(window).height() < $('#dashboard-stats').offset().top) { 
    $('#dashboard-stats').data('triggered', false); 
  } 
}); 
 
function generateBarGraph(selector) { 
  console.log('triggered'); 
}

.block { 
  height: 500px; 
  background-color: lightblue; 
} 
 
#dashboard-stats { 
  background-color: lightgreen; 
  height: 200px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"></div> 
<div id="dashboard-stats"></div> 
<div class="block"></div>

Answer 2

$(window).on('scroll', function () {
    if($('elem').length > 0 && $(window).scrollTop()+$(window).height() >= $('elem').offset().top){                                                                   
        $('elem').fadeIn();                                    
}