JS/jQuery

Появление элемента в области просмотра браузера

Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery scrollTopheightouterHeight и offset.

$(window).scroll(function(){
    var wt = $(window).scrollTop();
    var wh = $(window).height();
    var et = $('элемент').offset().top;
    var eh = $('элемент').outerHeight();
    var dh = $(document).height();   
    if (wt + wh >= et || wh + wt == dh || eh + et < wh){
        console.log('Элемент показан');
    }
});
1

Запуск анимации при скроллинге

В середине сайта есть блок .active, как только до него доскролить в нем запускается анимация, но только один раз.

...

<div class="active">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

...
var block_show = false;

function scrollTracking(){
    if (block_show) {
        return false;
    }

    var wt = $(window).scrollTop();
    var wh = $(window).height();
    var et = $('.active').offset().top;
    var eh = $('.active').outerHeight();
    var dh = $(document).height();   
 
    if (wt + wh >= et || wh + wt == dh || eh + et < wh){
        block_show = true;
        
        // Код анимации
        $('.active div:eq(0)').show('fast', function(){
            $(this).next().show('fast', arguments.callee);
        });
    }
}

$(window).scroll(function(){
    scrollTracking();
});
    
$(document).ready(function(){ 
    scrollTracking();
});
2

Отслеживание видимости элемента

Следующий пример отслеживает появление и пропадание блока из области видимости браузера.

...

<div class="active">Active</div>

...
var block_show = null;

function scrollTracking(){
    var wt = $(window).scrollTop();
    var wh = $(window).height();
    var et = $('.active').offset().top;
    var eh = $('.active').outerHeight();

    if (wt + wh >= et && wt + wh - eh * 2 <= et + (wh - eh)){
        if (block_show == null || block_show == false) {
            console.log('Блок active в области видимости');
        }
        block_show = true;
    } else {
        if (block_show == null || block_show == true) {
            console.log('Блок active скрыт');
        }
        block_show = false;
    }
}

$(window).scroll(function(){
    scrollTracking();
});
    
$(document).ready(function(){ 
    scrollTracking();
});
16 февраля 2019
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...