Функция плавающий блок на jQuery для сайта
 | |
| Здесь поставим на сайт плавающий блок, который будет в контейнере. И при прокрутки в низ он будет оставаться всегда визуально на сайте. Безусловно вы встречали интернет ресурсы где вы прокручиваете в низ и все блоки уходят а один остается всегда на виду и когда страницу поднимаешь, он также есть. Основном это информационные блоки, также рекламные, чтоб всегда пользователи и гости сайта видели ту или иную информацию на нем. Применять его можно на любой тематической площадке, главное чтоб было что показать, как основа рекламный баннер можно увидеть. Но вы также можете навигацию, но здесь нужно понимать, чтоб в контейнере в последнем ряду стояло. Но здесь основная мысль сделано, чтоб это плавающий блок вида был виден и все его замечали, делают в таком случай его в контейнере в самом низу, так как через другие он не может перепрыгнуть, а здесь ему место остается. Здесь нужно заметить, что по своим функциям он будет отличаться. А это если у других будет просто блог заплывать на низ сайта, а они бывают высокими, то это будет так скажем умнее в этом случай. Он точно будет останавливаться перед низ сайтом и на него заезжать не станет. Переходим к установке: Как уже сказано было, что блок от сайта или вы установили рекламный блок и вам нужно чтоб как не крутили вверх или в низ он был на виду. И начнем с того, что в низ сайта устанавливаем скрипт: Код <script> $(document).ready(function(){ var $scrollingBanner = $("#zornet"); var $footer = $("#footer"); var $BannerOffsetTop = 0; $(window).scroll(function(){ if($(window).scrollTop() < ($footer.offset().top - 350)) { $BannerOffsetTop = $scrollingBanner.offset().top - parseInt($scrollingBanner.css('marginTop'),0) -0; if($(window).scrollTop() > $BannerOffsetTop - 0) { $scrollingBanner.stop().animate({"marginTop": ($(window).scrollTop() - $BannerOffsetTop + 20) + "px"}, 0); } else { $scrollingBanner.stop().animate({"marginTop": 20 + "px"},0); } } }); }); </script> Теперь немного разберем его: 1. В самом почти вверху находим #block - эта функция как раз будет отвечать за тот блок, который вы подключите. А точнее вам в блок нужно прописать id="zornet" в код или баннер, что стоит в блоке. Здесь вы можете название свое написать, но чтоб они совпадали как в скрипте и блоке, который будет плавать и оставаться визуально. 2. #footer - идентификатор блока нижней части сайта на сайте. Задайте блоку футера уникальный идентификатор, и потом как обычно вписываем его в скрипт вместо этого. Но при установки на проверку не трогал эту функцию, только первую. 3. Также в скрипте находим 350 - что будет отвечать за высоту. 4. А вот 20 - это отвечает за отступ, так что на эти пиксели он будет не прилипать, а висеть от вверх монитора, если так можно выразиться. Как пример, проверял на баннере: Код <center><div class="inner" id="zornet"><a href="http://goo.gl/u0Qv87" target="_blank" rel="nofollow"><img src="http://zornet.ru/Ajaxoskrip/Abaveg/usocial.png"></a></div></center> Видим, что id="zornet" прописан в коде и эта картинка плавает. PS - вообщем задаем индикатор на id который впишем блок, здесь у нас zornet и сразу прописываем в скрипт его. Все проверил и работает отлично и теперь вы также можете установить себе на сайт и вывести актуальную информацию. Источник: Fullweb.ucoz.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 20 | |
|
| |
| 1 2 » | |
