vyshkant
@vyshkant
developer

Как присвоить/убрать position: fixed; при скроллинге?

Понимаю, что вопрос заслуживает RTFM, но всё же надеюсь на помощь.

Ситуация следующая: на сайте есть два блока, которые при определенных условиях скроллинга должны получить position: fixed и быть закреплены у верхнего и нижнего краев браузера.

Первый блок - меню, которое при загрузке страницы находится ниже шапки, а при скроллинге вниз должно остаться у верхнего края браузера.
Второй блок - полоска, прижатая к нижней части окна браузера, которая при скроллинге вниз должна прижаться к верху футера (т.е. потерять position: fixed;).

Догадываюсь, что решение предполагает использование jquery. Прошу помочь в реализации данной задумки.
  • Вопрос задан
  • 13261 просмотр
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
В общем виде советую решение следующее:
$(window).scroll(function(){
        if ($(window).scrollTop() > 400) {
            $('.header').addClass('header-fixed');
        }
        else {
            $('.header').removeClass('header-fixed');
        }
    });

Аналогично и для других элементов. Естественно, условия прописывайте сами. Ну и соответствующим образом прописывайте классы.
Для того, чтобы Вам помогли прописать конкретно для Вашего примера - нужна Ваша разметка и условия фиксации блоков.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Описать условия скроллинга сможете?
Верхнее меню
//Условие
$('nav').css('position', 'fixed');
//Условие при обратном скролле
$('nav').css('position', '');

Вот готовый пример: demo.hongkiat.com/css-sticky-position/index2.html
Ответ написан
@sergealmazov
Подписываетесь на событие $(window).scroll(function() {});

В функции и пишете свои условия.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы