Главная » Файлы » Прочие скрипты » jQuery

Плавающий блок относительно нужного объекта на jQuery
22.06.14, 20:11:58



Для начала посмотрите ПРИМЕР

Если пример вас удовлетворил - переходим к установке

В head пропишите следующий код:
Код
<style type="text/css">  
  #main {  
width:900px;  
margin:0 auto;  
  }  
  .colLeft {  
width:70%;  
float:left;  
  }  
  .colRight {  
float:right;  
width:20%;  
  }  
  h1{  
background:#CCC;  
padding:50px;  
  }  
  #fixed {  
background:#CCC;  
padding:20px;  
  }  
  </style>  
  <script type="text/javascript">  
$(function() {  
var offset = $("#fixed").offset();  
var topPadding = 15;  
$(window).scroll(function() {  
if ($(window).scrollTop() > offset.top) {  
$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});  
}  
else {$("#fixed").stop().animate({marginTop: 0});};});  
});  
  </script>


Далее идет наш основной код:
Код
<div id="main">  
<h1>Плавающий блок. Прокрутите страницу вниз</h1>  
<div class="colLeft">  
Здесь ваш контент  
</div>  
<div class="colRight">  
<div id="fixed">Я зафиксированный блок</div>  
</div>  
  </div>


Всё smile
Категория: jQuery | Добавил: Apocalypse | Теги: нужного, блок, на, Плавающий, JQuery, объекта, относительно
Просмотров: 440 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: