Содержание
Сегодня мы обсудим материал, о том как сделать плавающий (фиксированный) блок для вашего сайта. Часто этот блок еще называют фиксированным или блок прилипала. Регулярно возникает необходимость сделать отдельный блок всегда на виду или весь правый или левый контейнер. Очень удобно к примеру если посетитель заходит к вам на сайт, он листает страницу вниз, читает вашу статью и правый контейнер двигается с перелистыванием совместно.
Плавающий блок который всегда в поле видимости пользователя увеличивает юзабельность для вашего сайта и к примеру если в данном блоке разместить рекламу от адсенс или яндекс директ, это увеличит кликабельность по рекламе со стороны ваших посетителей.
В создании плавающего блока нет ничего сложного. Первое что нам нужно сделать чтобы наш блок плавал вместо с перелистыванием страницы, нам нужно завернуть нужный блок в код:
<div class="sticky-block"> <div class="inner"> вот здесь вставьте код вашего блока, это может быть как отдельный блок так и полностью правый или левый контейнер на сайте. </div> </div>
второй шаг, нам нужно установить в блок <head>сюда</head> перед закрывающим тегом скрипт:
<script type="text/javascript">
$(window).scroll(function() {
var sb_m = 20; /* отступ сверху и снизу */
var mb = 300; /* высота подвала с запасом */
var st = $(window).scrollTop();
var sb = $(".sticky-block");
var sbi = $(".sticky-block .inner");
var sb_ot = sb.offset().top;
var sbi_ot = sbi.offset().top;
var sb_h = sb.height();
if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
if(st > sb_ot) {
var h = Math.round(st - sb_ot) + sb_m;
sb.css({"paddingTop" : h});
}
else {
sb.css({"paddingTop" : 0});
}
}
});
</script>
необходимые отступы вы сами можете отрегулировать как вам нужно. В скрипте выше в комментариях указано где какой отступ и для чего. Пример работы этого скрипта вы можете видеть по контейнеру справа у меня на сайте.
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!
|
| |
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.
