Главная » Файлы » Прочие скрипты » 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> Всё | |
Просмотров: 489 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |