1

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

(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.

2 ответа 2

2

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

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

15
  • сейчас попробую, а скажите пожалуйста библиотека должна быть именно 2.1.1? 19 июн 2017 в 10:11
  • @СергійЧуйко нет
    – MihailPw
    19 июн 2017 в 10:11
  • не то, не работает, я добавил $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() > $('#dashboard-stats').offset().top && !$('#dashboard-stats').data('triggered')) { $('#dashboard-stats').data('triggered', true); generateBarGraph('#dashboard-stats'); } }); вместо 19 июн 2017 в 10:18
  • $( window ).scroll(function(wrapper) { generateBarGraph('#dashboard-stats'); }); })(jQuery); и ничего( 19 июн 2017 в 10:18
0
$(window).on('scroll', function () {
    if($('elem').length > 0 && $(window).scrollTop()+$(window).height() >= $('elem').offset().top){                                                                   
        $('elem').fadeIn();                                    
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.