Как отображать элемент при скролле и скрывать его за N пикселей до появления конца страницы?

Question

[Synthua]

На данный момент фиксированный элемент отображается при скролле вот этим кодом:

$(document).ready(function() {
  $(window).scroll(function() {
    if ( $(this).scrollTop() > 600 ) {
      $('#widget').fadeIn('fast');
    } else {
      $('#widget').fadeOut('fast');
    }
  });
});

Мне нужно, чтобы элемент скрывался за N пикселей до конца страницы, либо же до появления во вьюпорте footer'a.
И если после скрытия (внизу страницы) начать скроллить вверх - элемент должен появляться снова.
Подскажите, пожалуйста, как решить задачу?

Добавил демо

Answer 1

[Andrew]

600 - это что?
Правильно, скопированный и не понятый код.
if ( $(this).scrollTop() > 600 ){...}
превращается...превращается в... элегантное условие

var pixelN = 100;
if ( $(this).scrollTop() > $(this).height() - $('footer').height() - pixelN){...}

var pixelN = 100; -
Значение

за N пикселей до конца страницы

Comments

[Synthua]

Здравствуйте!

Сделал демо.

600 - значение правильное в данном случае, при этом значение $(this).scrollTop() виджет "проявляется". Это происходит в момент прохождения блока hero.

Так вот мне нужно добиться того, чтобы виджет пропадал буквально за несколько пикселей до появления во вьюпорте блока footer.

[Andrew]

Synthua, так посчитайте, когда(сколько пикселей сверху) у вас становится видно футер.
Что-то типа:

var pixelN = 50;
var prevElHeight = $('.prevFooterEl').height()/2;
if ( $(this).scrollTop() > $(this).height() - $('footer').height()- prevElHeight - pixelN){...}

Я не знаю какой высоты блок перед футером, т.е. если он больше 100vh . - режем его высоту на какое-то кол-во пикселей.
Можете попробовать поиграться со значениями css самого футера, т.е. задать её в

footer {
height: 25vh
}

и получится, что 4*высота футера = весь ваш вьюпорт и формуле полегче:

var pixelN = 50;
if ( $(this).scrollTop() > $(this).height() - $('footer').height()*3 - pixelN){...}

[Synthua]

Andrew, Спасибо вам за помощь.

Всё оказалось намного проще. В моем конкретном случае решение выглядит вот так:

$(document).ready(function() {
  $(window).scroll(function() {
    if ( $(this).scrollTop() > 600 && $(this).scrollTop() < $(document).height() - 1200 ) {
      $('#enroll-widget').fadeIn('fast');
    } else {
      $('#enroll-widget').fadeOut('fast');
    }
    console.log($(this).scrollTop());
  });
});

Объясните, только, пожалуйста вот такой нюанс. (Возможно, вам вопрос покажется глупый, прошу прощения).

Допустим, в файле скрипта, я определяю переменную

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

После этого гружу свою страницу и в консоли запрашиваю вывод переменно. Так вот в моем случае переменная выдает 24000. А если после этого запросить $(document).height() - то уже реальные 9000.

Почему так?

[Andrew]

Synthua, в какой момент вы выводите первую переменную и вторую?
Если обе в

$(document).ready(function() {
//тут...
});

То значение не должно меняться.
Если в начале, то может, что-то увеличивает/уменьшает высоту и еще гляньте где подключается скрипт.

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

Если браузер видит тег script, то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.

Отсюда

[Synthua]

Andrew, переменную range в js файле определял до

$(document).ready(function() {
//...
});

Потом после загрузки страницы в браузере в консоли запрашивал её значение.

В принципе всё понятно. Нужно продолжать изучать теорию.

Еще раз спасибо за вашу помощь!