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

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

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

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

Комментарии

Аватар пользователя klim klim 12 ноября 2009 в 20:17

"<a href="mailto:stanley78@drupal.ru">stanley78@drupal.ru</a>" wrote:
я бы для начала побаловался с position: fixed

это при создании шаблона?

Аватар пользователя 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>

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