Хаки и Скрипты Next Generation CMS

Фиксированный, плавающий блок

irbees2008 irbees2008 Опубликовано - 30 - марта Интерфейс
4212 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Фиксированный, плавающий блок

1. в файл css добавляем :

Код:
.left {
float:left;
width:75%;
height:2000px;
}
.right {
float:right;
width:20%;
}
#fixed {
background:#CCC;
padding:20px;
}
2.подключаем jquery если еще не подключено в head:
Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

3.подключаем блок вывода

Код:
<div class="right">
<div id="fixed">Я фиксированный блок!</div>
</div>
4.подключаем скрипт в main.tpl перед
Код:
</body>
Код:
<script type="text/javascript">
var height = $(window).height() - 100;
$("#fixed").css('margin-top', $(window).scrollTop() + height+'px' );//ставим div в нижний угол экрана

$(function(){

window.onresize = resize;

function resize() {
height = $(window).height() - 100;
$("#fixed").css('margin-top', $(window).scrollTop() + height+'px' );//ставим div в нижний угол экрана
}

$(window).scroll(function(){

$("#fixed").stop().animate({marginTop: $(window).scrollTop() + height});
});
});

</script>

Можешь почитать и вот эту статейку "Rocket Games"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйт cущecтвуeт: 4627 дней
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 618
  • Неопубликованных новостей: 8
  • Комментариев: 257
  • Зарегестрированных пользователей: 779
  • Онлайн всего: [8]
  • Гости: [8]
  • Сегодня нас посетили: [7] Google, Larrytitly, Яндекс, Яндекс, irbees2008, Google, dankeanke
  • SQL запросов: 37
  • Генерация страницы: 0.117сек
  • Потребление памяти: 2.990 Mb 
  •   Яндекс.Метрика