INVERSER
INVERSER
Powerful web-based technologies
Powerful web-based technologies
Email:
Mobile:
YouTube

Если Вам требуется разместить какое-либо содержимое в плавающем окне, которое будет доступно пользователю даже при прокрутке страницы, то Вам подойдет ненавязчивый скрипт, использующий библиотеку 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 и страницу демонстрации.

jQuery Floating scroll

Файлы jQuery Floating scroll:

Скачать файл 1
DEMO

Задать вопрос

inverser 2015-10-07 09:37:51
Обращайтесь, если потребуется помощь.
Дмитрий 2015-10-07 09:37:23
Благодарю!
inverser 2015-10-07 09:36:50
Дмитрий, для Вас переделал. Вот демонстрация, если что-то не понятно, откройте исходный код. Изменяйте параметры top и left в стилях. Далее по коду JS двигайтесь и увидете...
меняйте top:pos-0+"px" на любое другое значение отличное от 0 для того,
чтобы окно после прокрутки было в нужном месте от верха
Дмитрий 2015-10-07 09:36:13
Подскажите куда этот код +parseInt($(window).height())-1200+"px" добавить чтобы при прокрутке окно было не сверху, а по центру. сначала все через css пытался так и ни чего не добился.
Хостинг для Вашего сайта
от 7$/365 дней
подробнее