1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Установка и настройка

Плавающий блок

Главные вкладки

Аватар пользователя klim klim 11 ноября 2009 в 11:43

Хочется создать плавающий блок, который при прокрутке страницы будет всегода на экране. как пример это картинка прилепленая к нижнему краю.
Видимо для этого надо создать спец. зону в разметке шаблона темы друпала.
Кто-нить делал подобное?

Комментарии

Аватар пользователя klim klim 29 ноября 2009 в 19:46

"keha3912" wrote:
было тут хорошее начинание http://drupal.org/project/floating_block , но похоже заглохло http://drupal.org/node/645476[/quote]
да.. жаль Sad но вроде как через css получается сделать, но с разными браузерами по разному Sad

Аватар пользователя mikewing mikewing 26 апреля 2013 в 12:33

Можно сделать так.
Добавляем в THEME_NAME.info

scripts[] = js/floating.js

Создаем в корне темы папку JS
Туда кладем скрипт floating.js такого содержания

jQuery(document).ready(function($){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 130) $('.floating').addClass('fixed'); //130 - это значение высоты прокрутки страницы для добавления класса .fixed
else $('.floating').removeClass('fixed');
});
});

В CSS добавляем

/* Плавающий блок */
.floating {
position: absolute;
float: left;
margin-left: -160px;
top: -15px;
}
.fixed {
position: fixed;
top: 30px;
}

Создаем блок и вставляем в регион

<div class="floating">
<!--Тут содержимое блока-->
</div>

Чистим кеш.
Результат будет как на Сайт проверенных советов - плавающий блок рекламы с левой стороны.

Логотип drupal.ru

Содержимое сайта публикуется на условиях CreativeCommons Attribution-ShareAlike 3.0 или более поздней версии. Программные коды в тексте статей — на условиях GNU GPL v2 или более поздней версии.

Документация по совместной работе с репозиторием drupal.ru – https://docs.drupal.ru/code

Drupal – торговая марка Дриса Бёйтарта

12+

AltStyle によって変換されたページ (->オリジナル) /