Вызвать функцию когда дошел на футера?

Question

[Alibek Kulseitov]

Я знаю в интернете куча ответов есть работающих. Но тут другой случай. Сайт сверстан не по стандарту. В общем на словах объяснять тяжело зайдите сюда Посмотрите код. Все это ради паралакса на главном экране. В общем в чем проблема? Проблема в том что надо вызвать функцию полета птицы тогда когда пользователь дошел до футера. Но я не могу правильно высчитать это так как тут как-такого скролла нету.
Пытаюсь интегрировать этот скрипт\

/*
    |--------------------------------------------------------------------------
    | Trigger Function when reaching bottom
    |--------------------------------------------------------------------------
    */

    $('.parallax').scroll(function(){
        if ( $(this).scrollTop() > $(document).height() - $('.footer').outerHeight() - $('.parallax').outerHeight()) {
            alert("hello");
        } else {
            alert("Bye");
        }
    });

Answer 1

[Александр]

Смотри, всё очень просто: у тебя основная загвоздка состоит в том, что ты не имеешь правильного значения высоты окна. Для того, чтобы его правильно посчитать - нужно сначала отключить всё то, что мешает этому подсчету, запомнить значение, а потом включить обратно.

Вот как примерно это выглядит:

function getRealDocumentHeight() {
	// Глушим правила, которые мешают высчитать высоту окна
	$('div.layout').css('overflow-x', 'visible');
	$('div.parallax').css('overflow-x', 'visible');
	$('div.parallax').css('overflow-y', 'visible');

	var result = $(document).height();

	// Удаляем наши "глушилки"
	$('div.layout').css('overflow-x', '');
	$('div.parallax').css('overflow-x', '');
	$('div.parallax').css('overflow-y', '');

	return result;
}


var realDocumentHeight = getRealDocumentHeight();
$('.parallax').scroll(function(){
    if ( $(this).scrollTop() > realDocumentHeight - $('.footer').outerHeight() - $('.parallax').outerHeight()) {
        console.log("hello");
    } else {
        console.log("Bye");
    }
});

Не переживай по поводу того, что у пользователя будет мигать изображение. Пока работает JS - браузер не будет рендерить эти изменения пока скрипт не отработает до самого конца, но возвращать подсчеты будет правильные.

Что касается конечного решения - то лучше не править CSS свойства в JS, а добавлять и убирать в body какой-то класс, который будет менять эти свойства.

Comments

[Alibek Kulseitov]

Спасибо!