Как при достижении определенного блока сделать всплывающее окно с помощью Jquery?

Question

[Keymorfist]

Добрый день / вечер. У меня возникла небольшая проблема с пониманием как решить задачу.

В общем цель задачи:

Допустим есть блок HEADER и CONTENT, НО интерес представляет таблица с идентификатором #TABLE.

Т. к в реальности блок CONTENT занимает приличную высоту, необходимо чтобы при попадании в поле зрения (окно браузера) #TABLE всплывало меню с кнопкой пролистать. Кнопка будет якорем к концу таблицы.

Цель вопроса. Мне нужен совет или ваш опыт, каким образом можно решить подобную задачу? Что мне почитать по этому поводу? Я так понимаю, что нужен какой-то триггер на это, но не совсем понимаю как сформировать в гугл запрос)

Answer 1

[Сергей Семенко]

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

Comments

[Keymorfist]

То что нужно, спасибо.

Answer 2

[Keymorfist]

$(window).on('scroll', function (){
var visible = $('#table').offset().top;
if ($(this).scrollTop() > visible - 500) {
  $('.endtable').css('display', 'block');
}
else {
  $('.endtable').css('display', 'none');
}
var hidden = $('#extra').offset().top;
if ($(this).scrollTop() > hidden - 300) {
  $('.endtable').css('display', 'none');
} 
});

Указываем, что когда верхушки браузера остается 500 пикселей, выскакивает необходимый элемент, если приподнимемся опять выше, обратно прячем блок оператором else

Если полностью пролистаем таблицу, делаем якорь и прячем также блок.