Показать сообщение отдельно
  #6 (permalink)  
Старый 19.01.2017, 09:34
Новичок на форуме
Отправить личное сообщение для tmn_Vlad Посмотреть профиль Найти все сообщения от tmn_Vlad
 
Регистрация: 19.01.2017
Сообщений: 1

Мой небольшой рабочий пример, сам новичок пишу всякую ерунду иногда), но тут перемешка js и jquery, так что не забудьте подключить jquery.
<span class="number-count__red">0</span>

var cikl = false;       //функция выполняется один раз
    window.onscroll = function scroll() {
            var scrollHeight = Math.max(
                document.body.scrollHeight, document.documentElement.scrollHeight,
                document.body.offsetHeight, document.documentElement.offsetHeight,
                document.body.clientHeight, document.documentElement.clientHeight
            );                                                                              //получаю высоту страницы
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;       //получаю цифру, на сколько прокручин элемент
            var scrollTopElemParent = $('.category__header').height();                      //высота header
            var scrollTopElem = $('#promos').offset();                                      //высота от header до нужного мне блока $('#promos')
            var start = 0, end = 135;                                                       // начало анимации конец анимации
            if (scrollTopElem.top < scrollTop + scrollTopElemParent + 400) {                // после того как мы докрутили до эелмента начинаем выполнять
                if (!cikl) {
                var element = $('.number-count__red')                                       //получаем наш селектор
                if (start <= end) {
                    var intervlal = setInterval(function () {                               //увеличиваем значение на 1 каждый1 0,2 сек.
                        element.innerHTML = start;                                          // записываем число в наш селектор
                        start += 1;
                        if (start == end) {                                                 //когда начальное значение и конечно будут равны оставнавливаем функцию
                            clearInterval(intervlal);
                            element.innerHTML = end;
                        }
                    }, 20);
                }
                    cikl = true;
            }
        }
    }
    }

Последний раз редактировалось tmn_Vlad, 19.01.2017 в 09:37.
Ответить с цитированием