| Главная » Файлы » Полезные скрипты для Ucoz |
Простой плавающий блок на jQuery
| 10.04.2016, 06:24 | |
| В последнее время на сайтах и в блогах стало популярным размещать фиксированный или правильнее сказать, плавающий блок, в который можно поместить меню, форму подписки или другую информацию, которая должна быть обязательно на виду. Суть в том, что такой блок изначально расположен как обычный элемент, но при прокрутке фиксируется и движется вместе со всей страницей, оставаясь видимым. HTML будет выглядит так: Код <div class="floating"> <!--Тут содержимое блока--> </div>
Теперь CSS. Сразу добавим и новый класс, у которого позиционирование зададим как fixed: Код .floating { background: #1c1c1c; color: #fff; font: normal normal 14px Tahoma; padding: 10px; width: 300px; /*указываем ширину*/
}
.fixed { position: fixed; top: 10px; /*здесь указываем отступ сверху*/ z-index: 9999; /*устанавливаем блок поверх всех элементов на странице*/
} Позиционирование у блока .floating, указывать не нужно, однако он должен располагаться внутри родительского элемента, относительно которого будет позиционироваться на странице. Также нужно указать ширину иначе при фиксированном позиционировании он займет всю доступную область и выйдет за границы родителя. А вот и сам скрипт jQuery. Его задача проста - когда страница прокручена до определенной высоты добавить класс и зафиксировать блок. Код $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top > 200) $('.floating').addClass('fixed'); //200 - это значение высоты прокрутки страницы для добавления класс else $('.floating').removeClass('fixed'); });
}); Все что нужно по оформлению, положению - прописывается в CSS, скрипт выполняет, как и положено, организационную функцию. Проще не куда. Не забываем что для работы такого рода лабуды к сайту должна быть подключена библиотека jQuery. ДЕМО Страница регистрации | |
|
| |
| Всего комментариев: 0 | |