Стабільний інформаційний блок при прокручуванні сторінки

90

В продовження теми створення різних спливаючих вікон/блоків, порився в своїх загашниках і відкопав, на мій погляд, одне дуже цікаве рішення, сподіваюся, гідний вашої уваги.
Іноді буває необхідно, щоб користувач при прокручуванні сторінки міг не втрачати з поля зору подається йому інформацію. Реалізується це досить просто, за допомогою невеликого 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;

position:absolute;
padding: 10px;
border: 1px solid #666;
background-color: #f2f2f2;
display: none;
max-width: 430px;
visibility: hidden;
z-index: 100;

Вставляєте цей нехитрий набір правил запис між тегами , або ж виносьте в окремий файл .css, і підключаєте його до документа все в тому ж розділі . Редагуєте під свої потреби параметри інформаційного блоку (ширину, висоту, фон, розмір шрифту, розташування на сторінці і т. д.), або залишаєте все як є, без змін.
З появою підтримки нових функцій та стандартів 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;

box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 0 20px rgba(0, 0, 0, 0.19);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Величезною скалкою в дупі, як завжди засів, тупорылый IE8, правда, для нього «убогого» намагаються застосовувати спеціальні фільтри, а найчастіше вони мало чим допомагають.
Про кожному пункті окремо розписувати не буду, так як не раз у своїх статтях торкався цієї теми, кому все ж цікаво, можна почитати 5 CSS стилів для блоку з фоном

HTML

Далі нам знадобиться сам javascript, який робить всю роботу. Копіюємо код і вставляємо все там же, між тегами: , або ж у підвалі сторінки, перед закриваючим тегом

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>

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

Завершальним етапом буде, розміщення блоку в HTML і наповнення його необхідним контентом, для цього в тілі сторінки, в будь-якому місці, у секції прописуємо наступне:

1
2
3
4
5
6
<div id="topbar">
<p align="right">
<a href="" onClick="closebar(); return false">закрити</a></p>
Тут наповнюєте блок потрібною вам інформацією...
</div>
Далі слід весь основний контент.....

закрити

Тут наповнюєте блок потрібною вам інформацією…

Далі слід весь основний контент…..

От і все! У нас з вами вийшов добре оформлений інформаційний блок. Місце і необхідність використання даного рішення, мабуть визначте тільки ви самі.

Завантажити Вихідні Коди

Всім удачі!

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: