Вопрос по html, css, jquery – Как заставить div прокручивать страницу вниз, когда она достигает верхней части страницы?

5

Я знаю, что название немного сбивает с толку; D, но в основном то, что я хочу сделать, ясно продемонстрировано на этом сайтеhttp://9gag.com прокрутите вниз и обратите внимание на боковую панель, есть 2 объявления, как только второе объявление достигает верхней части страницы, оно начинает прокручиваться вниз со страницей.

Я хотел бы знать, как это сделать? Решения html / css или jQuery являются предпочтительными.

Самый простой способ - прослушать событие прокрутки тега body, затем, когда scrollTop превысит определенное количество, добавить класс к объявлению, фиксируя его позицию, затем удалить класс, когда scrollTop вернется к значению ниже этого значения. У меня нет кода для отправки в качестве образца, поэтому я не буду публиковать его в качестве ответа. Kevin B
@KevinB Спасибо, но я не очень хорошо разбираюсь в коде, поэтому я бы предпочел код, но спасибо за логику! Ilja

Ваш Ответ

2   ответа
7

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

$(document).scroll(function() {

    var useFixedSidebar = $(document).scrollTop() >= myThresholdValue;
    $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar);

});

И ваш CSS в основном будет выглядеть так:

.my-sidebar-items.fixedSidebar { position: fixed; }

Осложняющим фактором является то, что вы, вероятно, захотите, чтобы элементы были зафиксированы на своих новых, верхних позициях, и вы захотите сделать что-то вроде этого:

.my-sidebar-items.fixedSidebar { position: fixed; top: 0 }

Тем не менее, это, вероятно, сложит ваши предметы друг на друга. Решением этой проблемы было бы поставитьfixedSidebar класс на контейнере, и используйте класс, как описано.

демонстрация

Сейчас попробую thnx Ilja
2

Похожие вопросы