Если Вам требуется разместить какое-либо содержимое в плавающем окне, которое будет доступно пользователю даже при прокрутке страницы, то Вам подойдет ненавязчивый скрипт, использующий библиотеку JQuery.
Особенность предоставляемого скрипта в том, что он:
• не грузит страницу;
• не требует высокопроизводительных процессоров для обработки, которые требуются, если, например, присвоить контейнеру (div или p) свойство: background-attachments: fixed; или position: fixed;
• очень прост в применении, настраиваем;
• содержимое может быть закрыто пользователем и больше ему не показываться, то есть, используются файлы Cookies.
При условии подключенной библиотеки jQuery, предлагаемый способ плавающего окна будет работать безотказно в любом адекватном обозревателе. Более того, Вы сможете его настроить как Вам угодно по дизайну и по функции в 42 строке:
if(getCookie('show_message')!='no')//введите значение yes, если требуется показывать сообщение после закрытия и повторной загрузки страницы
Весь код, необходимый для понимания:
$(document).ready(function()
{
if(getCookie('show_message')!='no')//введите значение yes, если требуется показывать сообщение после закрытия и повторной загрузки страницы
{
var pos=parseInt($(window).load())+parseInt($(window).height());
$('#message_box').css("top",pos-0+"px");
$('#message_box').show(); //отображаем сообщение при первой загрузке страницы
//когда пользователь прокручивает страницу вниз - мы мягко отображаем наше содержимое
$(window).scroll(function()
{
var pos=parseInt($(window).scrollTop());
$('#message_box').animate({top:pos-0+"px" },{queue: false, duration: 500}); /* меняйте top:pos-0+"px" на лбюое другое значение отличное от 0 для того,
чтобы окно после прокрутки было в нужном месте от верха;
также меняйте duration: 500, если Вам требуется более быстрое или медленное прокручивание*/
});
}
//когда кнопка закрытия в правом углу окна сообщения нажата
$('#close_message').click(function()
{
//ТО! содержимое скрывается вверх со смещением в 15px и приводится к нулевой прозрачности
$('#message_box').animate({ top:"-=15px",opacity:0 }, "slow");
setCookie('show_message','no',1); /*cookies устанавливается для значения if(getCookie('show_message')!='no' в начале кода*/
});
});
//функцию, которая устанавливает имя куки, значение и срок истечения времени в часах
function setCookie(c_name,value,expireHours)
{
var exhour=new Date(); //создается дата
exhour.setHours(exhour.getHours()+1);
document.cookie=c_name+ "=" +escape(value)+
((expireHours==null) ? "" : ";expires="+exhour.toGMTString());
}
//функция получения значения имени cookie, установленного выше
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
В архиве Вы найдете три файла: библиотеку jquery-1.2.6.min.js, изображение pop_close.png и страницу демонстрации.
