Стабильный информационный блок при прокрутке страницы
В продолжение темы создания различных всплывающих окон/блоков, покопался в своих загашниках и откопал, на мой взгляд, одно очень интересное решение, надеюсь, достойное вашего внимания.
Иногда бывает необходимо, чтобы пользователь при прокрутке страницы мог не терять из поля зрения подаваемую ему информацию. Реализуется это довольно просто, с помощью небольшого javascript и сформированных стилей CSS.
Что касается лично меня, в большинстве случаев, такой способ подачи информации просто выводит из себя, особенно если при этом, нам пытаются впарить назойливую рекламу, но в данном и конкретном случае, если изначально использовать этот способ без излишнего напора на пользователя, предоставив ему возможность выбора, т.е. возможность закрытия блока в любой момент, в таком виде, несомненно, фиксированный блок становится очень полезным и функциональным инструментом.
Посмотрите живой пример информационного блока фиксированного при прокрутке страницы:
Начнем с формирования стилей CSS:
CSS
position:absolute; padding: 10px; border: 1px solid #666; background-color: #f2f2f2; display: none; max-width: 430px; visibility: hidden; z-index: 100; |
Вставляете этот незамысловатый набор правил в запись между тегами <head></head>, или же выносите в отдельный файл .css, и подключаете его к документу всё в том, же разделе <head></head>. Редактируете под свои нужды параметры информационного блока (ширину, высоту, фон, размер текста, расположение на странице и т.д.), или оставляете всё как есть без изменений.
С появлением поддержки новых функций и стандартов CSS3 в современных браузерах, наши возможности стилизации, оформления чего бы то ни было на страницах сайта, становятся практически безграничны. Для примера можете придать вашему всплывающему блоку теневой эффект, с помощью свойства box-shadow, или же слегка закруглить углы изменяя значения свойства border-radius. Просто добавьте к стилям в #topbar несколько строк:
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; |
Огромной занозой в заднице, как всегда засел, тупорылый IE8, правда, для него «убогого» пытаются применять специальные фильтры, но чаще всего они мало чем помогают.
О каждом пункте отдельно расписывать не буду, так как не раз в своих статьях касался этой темы, кому все же интересно можно почитать 5 CSS стилей для блока с фоном
HTML
Далее нам понадобится сам javascript, который делает всю работу. Копируем код и вставляем всё там же, между тегами: <head> </head>, или же в подвале страницы, перед закрывающим тегом </body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<script type="text/javascript"> var delay_popup = 5000; etTimeout("document.getElementById('topbar').style.display='block'", delay_popup); // появляется с задержкой в 5 секунд var persistclose=0 //значение 0 или 1. 1 означает что блок будет оставаться закрытым для браузера var startX = 30 //смещение блока по горизонтали(X) в пикселях var startY = 10 //смещение блока по вертикали(Y) в пикселях var verticalpos="fromtop" //выводим блок "сверху" или "снизу", значения "fromtop" или "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; //для вывода блока справа измените.left на .right el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script> |
Завершающим этапом будет, размещение блока в HTML и наполнение его необходимым контентом, для этого в теле страницы, в любом месте, в секции <body></body> прописываем следующее:
1 2 3 4 5 6 |
<div id="topbar"> <p align="right"> <a href="" onClick="closebar(); return false">закрыть</a></p> Здесь наполняете блок нужной вам информацией... </div> Далее следует весь основной контент..... |
Вот и всё! У нас с вами получился хорошо оформленный информационный блок. Место и необходимость использования данного решения, пожалуй определите только вы сами.
Всем удачи!
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Прикольно,надо поиздеваться над скриптом.
Спасибо за интересный материал, почитал несколько Ваших записей, очень понравилось!
Ха! Нифига! Классный скрипт! Спасибо блогеру! И спасибо за демо!
В коде в 7-й строке (return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
}) ругается на ошибку… Подскажите пожалуйста, что к чему…
Александр. Доброго вам времени суток!
Неплохо бы узнать для начала, кто или что «ругается» на ошибку и уж совсем хорошо, если узнаем какого рода ошибка. Если код javascript использован без изменений, ничто или никто «ругаться» не должен. Страница примера загружается на ура, браузеры на скрипт реагируют спокойно без каких — либо попыток блокировать всплывающее окно информационного блока. Делаем вывод: «Не в скрипте собака зарыта!»
Спасибо, очень класный скрипт, долго искал.
Подскажите, пожалуйста, как его разместить с правой стороны экрана, что бы он был на определенном растоянии от правого края не зависимо от размеров экрана? Пробовал float прописывать — не очень помогает. Спасибо.
Здравствуйте, maxim.
Для того чтобы изменить расположение блока достаточно в функции javascript, определяющей по умолчанию класс позиционирования
.left, заменить на класс.right.Делается это так, в исполняемом js находите строку такого содержания:
el.sP=function(x,y){this.style.left=x+”px”;this.style.top=y+”px”;};
el.sP=function(x,y){this.style.left=x+”px”;this.style.top=y+”px”;};
Меняете .left на .right и всё! Блок будет выводится справа, как регулируется отступ от края, прописано в комментариях непосредственно в самом скрипте.
Удачи!