Используйте jQuery, чтобы скрыть HTML-элемент после прокрутки определенной высоты за пределы

Question

Я пытаюсь сделать что-то здесь для презентации.

Я бы хотел, чтобы это работало так:

• Когда окно просмотра имеет высоту менее 900 пикселей, к основанию страницы прикрепляется нижний колонтитул с фиксированным положением.

  • Как только позиция прокрутки на странице переходит определенный порог, этот нижний колонтитул становится скрытым

• Когда область просмотра больше 900 пикселей, это будет вести себя как обычная страница ... после содержимого появится нижний колонтитул.

Я просто создаю это с помощью фоновых изображений. По сути, я пытаюсь сделать то, что вы видите в приложении iOS Contacts (буква, которую вы просматриваете, держится до тех пор, пока вы не прокручиваете ее, а затем перемещается вверх), только я делаю это снизу, а не сверху. Кто-нибудь делал это в браузере?

Я могу показать / скрыть нижний колонтитул в зависимости от размера области просмотра с помощью медиа-запросов, но я не знаю, как сделать то же самое с позицией прокрутки.

Answer 1

Попробуйте это

$(window).scroll(function(){
   var $win = $(window);
   var scrollTopThreshold = 200;
   if($win.height() < 900){//first condition
      //position the footer to the base of the page using css or jquery
   }
   else if($(document).scrollTop() > scrollTopThreshold){//second condition
      //Hide the footer
   }
   else if($win.height() > 900){//thrid condition
      //let footer appear at the bottom of the content
   }
});