Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Стили (CSS) » Остановка скользящего (прилипающего) блока при достижении определенного дива

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

mastodontoff 27.03.2014 Стили (CSS), jQuery 10388

вопрос

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

Код скрипта

Показать / Скрыть текст

<script> $(window).scroll(function() { if ($(this).scrollTop()>1910) $('#scrollable').css({'position':'fixed','top':'0px'}); else $('#scrollable').css({'top':'568px','position':'static'}); }); </script>  <div id='scrollable' style="width:250px";>  Ваш код вставляйте тут.   </div>

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

Показать / Скрыть текст

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

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

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

3 комментария

Юзер

124

mastodontoff - 2014-03-2727 марта 2014 17:16 - #25762

Нашел еще один скрипт

<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>
Но он двигает в низ все, что находится под ним

Юзер

124

mastodontoff - 2014-03-2727 марта 2014 22:08 - #25783

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

Юзер

andreyberg - 2014-03-2710 июля 2015 15:21 - #46165

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

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

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

Nimax | Создание простого сайта отзывов (рейтинг ... ⁵

Nimax
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
Сегодня, 17:18

Странный вы, это как минимум в ваших интересах т.к модули с рейтингами для комментариев есть и в паблике, поэтому и хочется посмотреть как это реализовано у вас. Стоимость то не низкая для модуля
New-dev.ru | Создание простого сайта отзывов (рейтинг ... ⁵

New-dev.ru
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
Вчера, 14:14

А что там на фронте на скрине или демо смотреть? Там в стандартную форму добавления комментария просто добавляется рейтинг, например, звездный.
TeraMoune | Сделать модуль опросы ³

TeraMoune
Сделать модуль опросы
22-04-2024, 13:32

Конечно. Пишите в телеграм.
Nimax | Сделать модуль опросы ³

Nimax
Сделать модуль опросы
22-04-2024, 13:17

Да в том и дело =) так и думал можете сделать? сколько будет по стоимости?
TeraMoune | Сделать модуль опросы ³

TeraMoune
Сделать модуль опросы
22-04-2024, 12:56

Зачем же для этого модуль ? Есть стандартные опросы, достаточно добавить одну правку на обработку тега в описании новости от стандартного тега poll.
Nimax | Создание простого сайта отзывов (рейтинг ... ⁵

Nimax
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
22-04-2024, 12:14

А есть скрины или демо как это на фронте выглядит?
New-dev.ru | Создание простого сайта отзывов (рейтинг ... ⁵

New-dev.ru
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
21-04-2024, 18:25

Эта старая публикация, за несколько месяцев цена выросла, а тут забыл исправить цену, сожалею. Сейчас поставил актуальную цену.
Nimax | Создание простого сайта отзывов (рейтинг ... ⁵

Nimax
Создание простого сайта отзывов (рейтинг и сортировка) - модуль PostReviews
21-04-2024, 13:18

Как преобрести за 9$? на сайте цена другая
Jigurda | Как в description вставить значение доп. ... ²

Jigurda
Как в description вставить значение доп.поля?
19-04-2024, 10:54

Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
lutskboy | Как в description вставить значение доп. ... ²

lutskboy
Как в description вставить значение доп.поля?
18-04-2024, 21:51

https://sandev.pro/web/159-fullstory-metatags-by-sander.html