My implementation progress bar at the top of the page #1348

This commit is contained in:
Alexandr Danilov 2015-08-17 01:50:46 +03:00
parent d75a9fa38b
commit fcb3faf109
3 changed files with 18 additions and 0 deletions

View File

@ -3,6 +3,9 @@
{% block title %}{{ entry.title|raw }} ({{ entry.domainName }}){% endblock %} {% block title %}{{ entry.title|raw }} ({{ entry.domainName }}){% endblock %}
{% block menu %} {% block menu %}
<div class="progress">
<div class="determinate"></div>
</div>
<nav class="hide-on-large-only"> <nav class="hide-on-large-only">
<div class="nav-wrapper cyan darken-1"> <div class="nav-wrapper cyan darken-1">
<ul> <ul>

View File

@ -269,6 +269,14 @@ main ul.row {
opacity: 1; opacity: 1;
} }
.progress {
position:fixed;
top:0px;
width: 100%;
height: 3px;
margin: 0;
z-index: 9999;
}
/* ========================================================================== /* ==========================================================================
6 = Media queries 6 = Media queries
========================================================================== */ ========================================================================== */

View File

@ -46,4 +46,11 @@ $(document).ready(function(){
$(".nav-panels").css('background', 'transparent'); $(".nav-panels").css('background', 'transparent');
return false; return false;
}); });
$(window).scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var scrollPercent = (s / (d-c)) * 100;
$(".progress .determinate").css('width', scrollPercent+'%');
});
}); });