Всплывающий блок на jQuery
Привет всем. Чего-то захотелось мне со своим бложиком поиграться и решил сделать вот такую штуку сверху экрана — как в Яндекс.почте, как на сайте Ильи Бирмана therules.ru. Только как назвать эту панель — не знаю. В общем кому интересно и тоже хочется себе прикрутить — копируйте код, всё просто.
Я пока верхнее меню продублировал, но можно и чего-нибудь другое воткнуть: форму поиска, рекламу и т.п. Вот так оно выглядит сейчас:
В каком порядке вставлять — разницы никакой, начну с js-кода:
$(function () {
var scroll_timer;
var displayed = false;
var $message = $('#messageTop'); // id блока
var $window = $(window);
var top = $(document.body).children(0).position().top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$message.fadeOut(500); // время скрытия блока
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});Стили:
#messageTop
{
display: block;
display: none;
z-index: 999;
opacity: .9;
position: fixed;
left: 50%; /* = центрируем блок */
margin-left: -520px; /* = половина ширины блока */
width: 1040px;
height: 50px;
background-color: #fff
}Сам блок:
<div id="messageTop">Сюда пихаете всё, что вам нужно</div>Так же пример можно использовать для появления кнопки «Наверх». Ну пролистнули вниз страницы, а тут она такая появляется :)
Кстати, во всяких ишаках толком не проверял даже, лень просто. Если что — пинайте меня, подкручу чего-нибудь.
Ещё посты из категории: jQuery
914-811
