Смотри, всё очень просто: у тебя основная загвоздка состоит в том, что ты не имеешь правильного значения высоты окна. Для того, чтобы его правильно посчитать - нужно сначала отключить всё то, что мешает этому подсчету, запомнить значение, а потом включить обратно.
Вот как примерно это выглядит:
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 какой-то класс, который будет менять эти свойства.