Страницы

Поиск по вопросам

вторник, 5 марта 2019 г.

Как реализовать блок, чтобы при прокрутке залипал у нижней границы окна браузера?

Как сделать, что бы при прокрутке блок прижимался к краю браузера, при этом блок находится далеко в подвале? Вот скролируемый блок Вот он в подвале Когда до скролировали до этого блока в подвале, скролируемый блок садится на место где он должен и быть.


Ответ

Например так:
$(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.arr').fadeIn(); } else{ $('.arr').fadeOut(); } }); $(document).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()) { $('.arr').addClass('fix'); } else { $('.arr').removeClass('fix'); } }); .footer{ position: relative; } /* Стрелка изначальная */ .arr { display: none; position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; } /* Стрелка при скролле до низа страницы */ .arr.fix { position: absolute; top: -50px; bottom: auto; } /* Стили для наглядности */ .arr { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid #000; transition: all .27s ease-in-out; } .content { height: 1500px; border: 1px solid #ccc; } .footer { background: #333; text-align: center; padding: 1rem; color: #fff; }

Некоторый основной контент
Тут подвал

Комментариев нет:

Отправить комментарий