Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Остановка скользящего (прилипающего) блока при достижении определенного дива

Остановка скользящего (прилипающего) блока при достижении определенного дива


     27.03.2014    Стили (CSS), jQuery    4619

вопрос
Добрый день. Есть простой скрипт, который позволяет установить скользящий блок, но проблема в том, что он идет при прокрутке до конца страницы перекрывая собой футер и контент который находится после див блока в котором он должен двигаться. Вопрос как возможно, чтобы такой блок останавливался достигнув определенного дива или другого блока или двигался только в приделах конкретного контейнера

Код скрипта


Карявенькая картинка


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

Ответил: ПафНутиЙ


Используйте плагин sticky-kit - это как раз то, что необходимо.

Комментарии пользователей (3)

mastodontoff
5

106 | 26

mastodontoff - 27 марта 2014 17:16 - Юзер

Нашел еще один скрипт
<script type="text/javascript">
    $(function() {
        var offset = $("#fixed").offset();
        var topPadding = 15;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
            }
            else {$("#fixed").stop().animate({marginTop: 0});};});
    });
</script>

<div id="fixed">Сам блок</div>
Но он двигает в низ все, что находится под ним

mastodontoff
5

106 | 26

mastodontoff - 27 марта 2014 22:08 - Юзер

Все работает, огромное спасибо.

andreyberg
1

andreyberg - 10 июля 2015 15:21 - Юзер

Пафнутий, а как именно пользоваться sticky-kit ?

Поискал в инете, никто инструкций хоть каких-то не даёт.
Сам потыкал, подключил файл JS, прописывал в нужный блок ID=sidebar или id=sticky_item, но толку ноль, блок не двигается((

Можно хоть какой-то намёк полному нубу.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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