Фиксированный плавающий блок при прокрутке на JS
Делаем плавающий фиксированный блок при прокрутке страницы.
В данной статье приведен пример на jаvascript. Скрипт отлично подходит для "плавающей" рекламы, блока профиля и т.д.
Так же, с помощью данного скрипта можно реализовать кнопку "Наверх".
Установка
Вставляем наш скрипт в main.tpl либо подключаем в любой js файл
<script type="text/jаvascript">
$(document).ready(function () {
var offset = $('#fixed').offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$('#fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
}
else {
$('#fixed').stop().animate({marginTop: 0});
}
});
});
</script>
Теперь если мы хотим зафиксировать какой-нибудь элемент нашего шаблона, достаточно добавить идентификатор #fixed:
id=
"fixed"
Например:
<div id="fixed">
<div class="panel panel-default">
<div class="panel-heading">Заголовок панели</div>
<div class="panel-body">
Содержимое панели
</div>
</div>
</div>
Надеюсь статейка пригодится ;)
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap css CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Оцените работу движка