Наверное, вы уже догадались, о чем идет речь. Плавающие блоки размещаются на странице, и как правило продолжают визуально оставаться на своём месте при прокрутке страницы. Использование плавающих блоков стало трендом для различных рекламных объявлений, так или иначе, для большего привлечения внимания посетителей. Возможность использования данной фичи не ограничивается использованием его для рекламы, т.к. бывают и реализации дизайна с плавающими элементами на странице. В общем, воля фантазиям, а мы перейдем к примеру реализации.
Пример реализован с помощью использования JQuery, а это значит, что вам следует предварительно подключить его в заголовке страницы. Далее в теле документа размещается сам блок:
<div id="fly_block"></div>
Затем прописываем код, который сделает эффект для блока:
<script type="text/javascript">
$(window).load(function() {
var block = $('#fly_block'); // ID блока
var position = block.position();
var windowpos = 0;
$(window).scroll(function() {
wintop = $(window).scrollTop();
if(wintop<position.top+10){
block.css({position: 'relative', top: '0px', left: '0px'});
} else {
block.css({position: 'fixed', top: '10px', left: position.left+'px'});
}
});
});
</script>
Давайте разберемся, что делает этот код. Код задает css-свойство position=fixed для блока, в тот момент, когда мы докручиваем страницу до верхнего края блока. Таким образом, блоки расположенные выше плавающего блока не будут перекрываться фиксированным блоком, он «поплывет» относительно них. Завязано всё это дело в событие прокрутки окна $(window).scroll().
Вот пример плавающего блока, успехов!
