Все мы, посещая тот или иной сайт, часто натыкаемся на плавающие окна с рекламой. Окна эти словно приклеены к границам вашего браузера и, независимо от того сколько вы будете прокручивать страницу и в какую сторону, реклама все равно будет находиться в одном и том же месте экрана. Окна бывают разными, где-то красуется только один яркий баннер, в других целый ряд тизеров, какие-то окна перемещаются моментально, другие с анимацией, но все это мелочи и опции, которые можно изменять, суть у всех таких баннеров одна.
Много интересных вещей можно сделать на Javascript, с помощью использования библиотеки jquery. Она настолько удобна и проста, что даже начинающий программист быстро поймет, что к чему. Хотя не мешает под рукой иметь документацию по объектам и их методам.
#floating_window {
top: 100px;
position: absolute;
/* В данном случае мы хотим располгать окно всегда по центру */
left: 50%;
z-index: 10;
background: #FFFFFF;
display: none;
}
Создадим такой объект стиля .css. В принципе, если нужно, то можно указать какие-нибудь другие параметры, к примеру width или height, однако в данном случае окно будет растягиваться автоматически, в зависимости от контента внутри него, что удобно.
Теперь, нужно написать Javascript. К слову, с помощью jQuery можно изменять любые параметры, находящиеся в .css стилях, суть как раз в этом и заключается.
$( document ).ready( function()
{
// Значение отступа, выше которого блок не поднимается,
// когда ползунок прокрутки на самом верху
var MIN_TOP = 200;
// Отступ от левого края блока контента,
// может быть положительным или отрицательным
var POSITIONLEFT = - 25;
// Центрирование окна
var width_minus = Math.floor( parseInt( $( '#message_box' ).css( "width" ) ) / 2 );
$( '#message_box' ).css( "left", $( '#mycontent' ).offset().left + POSITIONLEFT + "px" );
$( '#message_box' ).css( "top", MIN_TOP + "px" );
$( '#message_box' ).show();
$( window ).scroll( function()
{
var pos = parseInt( $( window ).scrollTop() );
if ( pos < MIN_TOP ) pos = MIN_TOP;
$('#message_box').animate({top:pos+50+"px" },{queue: false, duration: 200});
});
$( window ).resize( function()
{
$( '#message_box' ).css( "left", $( '#mycontent' ).offset().left + POSITIONLEFT + "px" );
});
});
Как уже стало понятно, код практически элементарный. По сути, главное тут реализация ограничения положения плавающего окна, то есть оно не должно "уплывать" слишком далеко, за определенные рамки.
Теперь рассмотрим каждую строку более подробно. Например, позицию окну задает следующий код:
$('#message_box').animate({top:pos+50+"px" },{queue: false, duration: 200});
То есть сначала выбираем элемент, id которого равен message_box, а затем вызываем от него функцию animate. Как можно догадаться из названия, эта функция предназначена для создания различных эффектов, будь то появления, исчезновения или плавного движения окна.
{top:pos+50+"px"} – этот кусок присваивает top: значение pos+50+"px", то есть изменяет сам стиль. duration:200 в данном случае передает скорость анимации, чем оно больше, тем медленнее движется окно. Можно поставить 0, тогда окно будет двигаться без задержки, но, тут есть минус, окно будет прыгать и создавать неприятный эффект для глаза. Чтобы избежать этого, необходимо воспользоваться другой функцией - css, которая просто присваивает элементам нужные значения.
Собственно, теперь стоит поговорить об обработчиках функций.
$( document ).ready( function() - вызывается, когда страница загружена и готова к работе. То есть в ней удобно и нужно проставлять стартовые значения переменных и прочие вещи, которые потом будут использоваться.
$( window ).scroll( function() – функция вызывается, когда страницу прокручивают. Непосредственно узнать степень прокрутки страницы, можно, вызвав $( window ).scrollTop().
$( window ).resize( function() – это тоже очень важная функция, вызов которой происходит в момент изменения размера окна браузера.
Вот и все. Чтобы это заработало, нужно придать блоку данных, относительно которого будет размещен блок окна, параметр id='mycontent', а блоку, который будет представлять собой это плавающее окно, id='message_box'.
