|
Сообщение от KosBeg
|
|
Помогите нее куда нибудь применить
|
индикация скрола
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nanobar.js</title>
<style>
/* стилизация страници */
*{
margin:0;
padding:0;
}
.container{margin:0 40%; position: absolute; top: 98%; left 0; width: 280px;}
/* /\/\/\/\/\/\/\/\/\/\/\ */
body {
margin: 0; /* удаляем отступы */
height: 1500px;
position: relative;
}
#nanobar {
background: #ff0000; /* фон */
border-radius: 0px 5px 5px 0px; /* закругление углов */
z-index: 9999; /* верхний индекс */
-webkit-box-shadow: 2px 2px 5px 0px #000000; /* тень для chrome */
-moz-box-shadow: 2px 2px 5px 0px #000000; /* тень для firexox */
box-shadow: 2px 2px 5px 0px #000000; /* тень для остальных браузеров */
filter: progid:DXImageTransform.Microsoft.shadow(direction=135, color=#000000, strength=4); /* тень для Internet Explorer */
width: 0; /* без этого полоска не хочет прятаться =) */
height: 4px; /* ширина полоски */
clear: both;
-webkit-transition: all 0.8s ease; /* анимация для chrome */
-moz-transition: all 0.8s ease; /* анимация для firexox */
-o-transition: all 0.8s ease; /* анимация для opera */
transition: all 0.8s ease; /* анимация для остальных браузеров */
}
#nanodiv {
width: 100%;
height: 5px;
z-Index: 9999;
top: 0;
}
</style>
</head>
<script>
var Nanobar = (function () {
'use strict';
var Bar, Nanobar, init,
init = function () {
var bar = new Bar( this );
this.bars.unshift( bar );
};
Bar = function ( cont ) {
this.el = document.createElement( 'div' );
this.el.id = 'nanobar';
this.width = 0;
this.here = 0;
this.moving = false;
this.cont = cont;
cont.el.appendChild( this.el );
};
Bar.prototype.go = function (num) {
this.el.style.width = num + '%';
};
Nanobar = function () {
var el;
this.bars = [];
el = this.el = document.createElement( 'div' );
this.el.id = 'nanodiv';
el.style.position = 'fixed';
document.getElementsByTagName( 'body' )[0].appendChild( el );
init.call( this );
};
Nanobar.prototype.go = function (p) {
this.bars[0].go( p );
};
return Nanobar;
})();
</script>
<body>
<div class="container">
<p>© 2015 <a href="https://github.com/jacoborus">jacoborus</a> - <a href="https://raw.github.com/jacoborus/nanobar/master/LICENSE">MIT License</a></p>
</div>
<script>
var nanobar = new Nanobar();
window.onscroll = function() {
var height = window.innerHeight; //Высота экрана пользователя
var scrollHeight = document.body.scrollHeight; //Высота всей страницы
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; //Получаем при каждой прокуртке позицию скроллинга
var pos = (scrollTop/(scrollHeight-height))*100;
nanobar.go(pos);
}
window.onscroll()
</script>
</body>
</html>