Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Javascript » Стабильный информационный блок при прокрутке страницы

Стабильный информационный блок при прокрутке страницы

Стабильный информационный блок при прокрутке страницы

В продолжение темы создания различных всплывающих окон/блоков, покопался в своих загашниках и откопал, на мой взгляд, одно очень интересное решение, надеюсь, достойное вашего внимания.
Иногда бывает необходимо, чтобы пользователь при прокрутке страницы мог не терять из поля зрения подаваемую ему информацию. Реализуется это довольно просто, с помощью небольшого и сформированных стилей CSS.
Что касается лично меня, в большинстве случаев, такой способ подачи информации просто выводит из себя, особенно если при этом, нам пытаются впарить назойливую рекламу, но в данном и конкретном случае, если изначально использовать этот способ без излишнего напора на пользователя, предоставив ему возможность выбора, т.е. возможность закрытия блока в любой момент, в таком виде, несомненно, фиксированный блок становится очень полезным и функциональным инструментом.

 

Обновление 09.12.2016. Добавил функцию всплывающего окна при загрузке страницы с задержкой в 3 секунды.

 

Посмотрите живой пример информационного блока фиксированного при прокрутке страницы:

Начнем с формирования стилей 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>. Редактируете под свои нужды параметры информационного блока (ширину, высоту, фон, размер текста, расположение на странице и т.д.), или оставляете всё как есть без изменений.
С появлением поддержки новых функций и стандартов в современных браузерах, наши возможности стилизации, оформления чего бы то ни было на страницах сайта, становятся практически безграничны. Для примера можете придать вашему всплывающему блоку теневой эффект, с помощью свойства 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 и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

7 комментариев
  1. Evgeniy:

    Прикольно,надо поиздеваться над скриптом.

    Ответить
  2. unsome:

    Спасибо за интересный материал, почитал несколько Ваших записей, очень понравилось!

    Ответить
  3. Яна:

    Ха! Нифига! Классный скрипт! Спасибо блогеру! И спасибо за демо!

    Ответить
  4. Александр:

    В коде в 7-й строке (return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

    }) ругается на ошибку... Подскажите пожалуйста, что к чему...

    Ответить
    • driver:

      Александр. Доброго вам времени суток!

      Неплохо бы узнать для начала, кто или что «ругается» на ошибку и уж совсем хорошо, если узнаем какого рода ошибка. Если код javascript использован без изменений, ничто или никто «ругаться» не должен. Страница примера загружается на ура, браузеры на скрипт реагируют спокойно без каких — либо попыток блокировать всплывающее окно информационного блока. Делаем вывод: «Не в скрипте собака зарыта!»

      Ответить
  5. maxim:

    Спасибо, очень класный скрипт, долго искал.

    Подскажите, пожалуйста, как его разместить с правой стороны экрана, что бы он был на определенном растоянии от правого края не зависимо от размеров экрана? Пробовал float прописывать — не очень помогает. Спасибо.

    Ответить
    • driver:

      Здравствуйте, maxim.

      Для того чтобы изменить расположение блока достаточно в функции javascript, определяющей по умолчанию класс позиционирования .left, заменить на класс .right.

      Делается это так, в исполняемом js находите строку такого содержания:

      el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

      Меняете .left на .right и всё! Блок будет выводится справа, как регулируется отступ от края, прописано в комментариях непосредственно в самом скрипте.

      Удачи!

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru