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

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


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

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

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


5 комментариев

misha-koder
Юзер

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

position: fixed;

baseroad
Юзер

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

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

mastodontoff
Юзер

mastodontoff - 14 ноября 2015 14:52 -


baseroad
Юзер

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

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

mastodontoff
Юзер

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>

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

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

наверх