Не срабатывает скрипт, где ошибка?

Question

[Роман Байдаков]

Всем привет.
Есть скрипт:

var target = $('.circle');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem){
      $('.circle').circleProgress({
    value: 1,
    size: 100,
    fill: {
      gradient: [
        ['#b5b5b5', .5],
        ['#D3D3D3', .5]
      ],
      gradientAngle: Math.PI / 4
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(parseInt(this.dataset.progress, 10) * progress));
  });
  }
});

Когда я скролю до элемента .circle, должен воспроизводиться код для анимации, но нечего не работает, если убрать этот код и оставить только анимацию, все работает:

$('.circle').circleProgress({
    value: 1,
    size: 100,
    fill: {
      gradient: [
        ['#b5b5b5', .5],
        ['#D3D3D3', .5]
      ],
      gradientAngle: Math.PI / 4
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(parseInt(this.dataset.progress, 10) * progress));
  });

Задача:
Сделать проигрывание анимации когда блок попадает в зону видимости человека.

Использую эту библиотеку:
kottenator.github.io/jquery-circle-progress
https://github.com/kottenator/jquery-circle-progress

Как быть?

Answer 1

[Никита Кит]

Потому что условие, очевидно, не выполняется. Я думаю тебе scrollBottom нужен. Это как scrollTop, только врибавь высоту окна $(window).outerHeight()

Comments

[Роман Байдаков]

А можете пожалуйста подсказать подробнее как правильно написать?
с $(window).outerHeight() проблемы

[Никита Кит]

Роман Байдаков: сорян, тупанул. У window нет outerHeight, только у блоков и документа.
var scrollBottom = $(window).scrollTop() + $(window).height();

[Роман Байдаков]

Никита Кит: так?

var target = $('.circle');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem){
      $('.circle').circleProgress({
    value: 1,
    size: 100,
    fill: {
      gradient: [
        ['#b5b5b5', .5],
        ['#D3D3D3', .5]
      ],
      gradientAngle: Math.PI / 4
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(Math.round(parseInt(this.dataset.progress, 10) * progress));
  });
  }
});

[Роман Байдаков]

Никита Кит: Точнее вместо
var scrollToElem = targetPos - winHeight;

ставить
var scrollBottom = $(window).scrollTop() + $(window).height();

[Роман Байдаков]

Никита Кит: Только что проверил, мой вариант работает, но он не работает тут:
app.platformalp.ru

я его как виджет хтмл ставлю. Странно

[Никита Кит]

Роман Байдаков: оберни в $(document).ready

[Роман Байдаков]

Никита Кит: не помогло(
Вот сайт:
syt4v3c6.plp7.ru

А вот хтмл файл с кружочками, если свернуть браузер, появится полоса прокрутки и все работает кое как, на сайте нет(

rgho.st/8hxdtj7SK