4254
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Фиксированный, плавающий блок
1. в файл css добавляем :
Код:
.left {
float:left;
width:75%;
height:2000px;
}
.right {
float:right;
width:20%;
}
#fixed {
background:#CCC;
padding:20px;
}Код:
<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>
Код:
</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>
Можешь почитать и вот эту статейку "HTML теги article"
Это тоже интересно
30.03.13Плавающий блок закладок
