Parallax. Как прокручивать фон только при прокрутке до определенного блока?

54

victorpavloff

19 декабря 2015, 10:18

905

Есть DIV с parallax-эффектом. DIV находится не вначале страницы, ближе к концу.

JS-код parallax-эффекта:

$('#block').each(function(){

    var $bgobj = $(this);

    $window.on('load scroll', function() {

        var yPos = -($window.scrollTop() / 10);

        var coords = '50% '+ yPos + 'px';

        $bgobj.css({ backgroundPosition: coords });

    });

});

Проблема в том, что фон начинает прокручиваться сразу с началом прокрутки страницы. Как сделать прокрутку фона только после того, как пользователь прокрутил страницу до этого блока?

Партнёрка №1 в essay-нише (https://goo.gl/YfTPtG)

94

Gerga

19 декабря 2015, 10:52

#1

victorpavloff,


$('#block').each(function(){
    var $bgobj = $(this),
        bgobj_top = $bgobj.offset().top;
    $window.on('load scroll', function() {
        var wind_sc_top = $window.scrollTop();
        if ( (wind_sc_top - bgobj_top) > 0 ) {            
            var yPos = -(wind_sc_top / 10);
            var coords = '50% '+ yPos + 'px';
            $bgobj.css({ backgroundPosition: coords });
        }
    });
});

V

54

victorpavloff

19 декабря 2015, 11:08

#2

Gerga:
victorpavloff,


$('#block').each(function(){

    var $bgobj = $(this),

        bgobj_top = $bgobj.offset().top;

    $window.on('load scroll', function() {

        var wind_sc_top = $window.scrollTop();

        if ( (wind_sc_top - bgobj_top) > 0 ) {            

            var yPos = -(wind_sc_top / 10);

            var coords = '50% '+ yPos + 'px';

            $bgobj.css({ backgroundPosition: coords });

        }

    });

});

Тут также есть проблема, при выполнении функции фон сразу прокручен на слишком большое расстояние.

94

Gerga

19 декабря 2015, 11:25

#3

victorpavloff:
var yPos = -(wind_sc_top / 10);

измените на


ar yPos = -((wind_sc_top - bgobj_top) / 10);

Что делать, если ваша email-рассылка попала в спам

Курс биткоина превысил $50 тысяч