kn1ght,
помогите реализовать эффект
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 1500px;
}
.progress-bar {
position: fixed;
margin-top: 40px;
height: 48px;
border: 1px solid #cfcfcf;
padding: 5px;
width: 80%;
}
.progress-bar__inner {
position: relative;
width: 100%;
height: 100%;
background-color: #e9ebec;
}
.progress-bar__scale {
position: absolute;
top: 0px;
left: 0px;
height: 48px;
width: 0px;
background-color: #00adef;
-webkit-transition: all 0.8s 0.2s;
transition: all 0.8s 0.2s;
}
.progress-bar__scale-25 {width: 25%;}
.progress-bar__scale-50 {width: 50%;}
.progress-bar__scale-75 {width: 75%;}
.progress-bar__scale-100 {width: 100%;}
.invis {visibility: hidden;}
.knowledge-bl__txt-cont {position: relative;}
.knowledge-bl__percentage {
position: fixed;
float: left;
width: 260px;
margin-top: 90px;
margin-left: 7px;
font-size: 98px;
font-weight: 700;
color: #00adef;
margin-bottom: 1000px;
}
.percentage-reserve-100 {
position: absolute;
width: 260px;
top: 36px;
left: 7px;
font-size: 98px;
font-weight: 700;
color: #00adef;
display: none;
}
.db {display: block !important;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function() {
var o = 100*$(window).scrollTop()/($(document).height()- $(window).height());
$(".progress-bar__scale").css({"width" : (o|0)+"%"});
$(".knowledge-bl__percentage").html((o|0)+"%");
})
});
</script>
</head>
<body>
<div class="progress-bar">
<div class="progress-bar__inner">
<div class="progress-bar__scale"></div>
</div>
</div>
<div class="knowledge-bl__percentage">0%</div>
<div class="knowledge-bl__txt-cont">
<div class="percentage-reserve-100">100%</div>
</div>
</body>
</html>