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

Как реализовать плавающий блок в сайтбаре?


     12.11.2015    Стили (CSS), jQuery    684

вопрос
Здравствуйте. Подскажите, как можно реализовать плавающий блок на сайте? Чтобы при скролинге, блок опускался вниз и вверх.

Ответа пока нет


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

misha-koder
7

299 | 78

misha-koder - 13 ноября 2015 06:09 - Юзер

position: fixed;

baseroad
4

281 | 7

baseroad - 14 ноября 2015 12:20 - Юзер

Почему-то не помогло

mastodontoff
5

106 | 26

mastodontoff - 14 ноября 2015 14:52 - Юзер


baseroad
4

281 | 7

baseroad - 14 ноября 2015 15:06 - Юзер

Можете подсказать как там устанавливаеться, а то я нечего не понял с сайта...))))

mastodontoff
5

106 | 26

mastodontoff - 14 ноября 2015 15:15 - Юзер

Можно проще,
для наглядности вот тут нарисовал http://jsfiddle.net/njou90f3/

Просто добавляете в main.tp и куда вам больше нравится скрипт, главное чтобы он подгрузился у вас на странице

<script type="text/javascript">
$(function() {
     var offset = $("#fixed").offset();
     var topPadding = 150, //отступ сверху
         bottomPadding = 370; //высота над которой остоновится
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) $("#fixed").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#fixed").stop().animate({
                 marginTop: 0
             });
         };
     });
});
</script>


А блок который вы желаете, чтобы двигался ставите между

<div id="fixed">.....</div>

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

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