Плавающий блок при прокрутке страницы
Сегодня мы попытаемся сделать плавающий блок при прокрутке страницы на js.
Скрипт фиксированного плавающего блока отлично подойдёт для рекламы, отображения какой нибудь важной информации, профиля пользователя , подписки. Скрипт плавающего блока будем ставить на DLE хотя особой разницы нету, но так как сайт у меня на DataLifeEingine ,то и соответственно пример будет для неё.
Установка:
1. Копируем и вставляем скрипт в 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>
2. Выводим наш скрипт в пользовательской части нашего сайта (шаблона) у меня это правый бар
Для этого просто добавляем идентификатор
id="fixed"
<div id="fixed">
<div class="panel panel-default">
<div class="panel-heading"><i class="glyphicon glyphicon-link" aria-hidden="true"></i> Ваша реклама</div>
<div class="panel-body">
{banner_linkslottext}
</div>
</div>
</div>
Пример приведён с моими классами и стилями, заменяем всё на своё
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как задать ширину в 100 пикселей в HTML