Хаки и Скрипты Next Generation CMS : Интерфейс, JS : Фиксированный, плавающий блок

irbees2008 Опубликовано - 30 - марта Интерфейс

Адаптировал: 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>

Можешь почитать и вот эту статейку "Фон сайта с эффектом параллакса на jQuery плагине jquery.plaxmove"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.