I have this jQuery code:
(function($) {
$.fn.extend({
WETotalScroll: function(opts) {
var object = $(this);
var position = "top";
var domHeight = 0;
var windowHeight = $(window).outerHeight();
if(opts) {
position = opts.position;
}
/* The dom is ready */
$(document).ready(function() {
domHeight = $(this).outerHeight() - windowHeight;
object.addClass(position);
var totalScrollContainer = '<div class="scrolled"></div>';
object.append(totalScrollContainer);
});
/* The window gets resized or scrolls */
$(window).on("resize scroll touchmove", function() {
windowHeight = $(window).outerHeight();
domHeight = $(document).outerHeight() - windowHeight;
calculateHeight();
});
function calculateHeight() {
var scroll = $(window).scrollTop();
if( scroll >= domHeight ) {
changeScrollFill($(".scrolled"), 100);
}
else if( scroll <= 0 ) {
changeScrollFill($(".scrolled"), 0);
}
else {
var calc = (scroll*100)/(domHeight);
changeScrollFill($(".scrolled"), calc);
}
}
function changeScrollFill(obj, percent) {
if(position == "top" || position == "bottom") {
$(obj).css({
"width": percent+"%"
});
}
else {
$(obj).css({
"height": percent+"%"
});
}
}
}
})
})(jQuery);
The plug-in basically shows a bar that grows and decreases depending as soon as you scroll on the page.
In local with devices (Android and iPhone) works well, when it reaches the end of the page the bar is full. When the address bar disappears it recalculates the height of the window correctly. But when it is on the server (already live) it always leaves an empty space, since it does not recalculate the height of the address bar disappears, preventing it from filling up.
Below I leave the snippet code, in case you want to try it. Like I said, this in local with both Android and iOS devices works fine, but it's when I upload it to production when it does not.
(function($) {
$.fn.extend({
WETotalScroll: function(opts) {
var object = $(this); //The object where to attach
var position = "top"; //Position of the bar
var domHeight = 0; //Document height
var windowHeight = $(window).outerHeight(); //Window Viewport height
if(opts) {
position = opts.position;
}
/* The dom is ready */
$(document).ready(function() {
domHeight = $(this).outerHeight() - windowHeight;
object.addClass(position);
var totalScrollContainer = '<div class="scrolled"></div>';
object.append(totalScrollContainer);
});
/* The window gets resized or scrolls */
$(window).on("resize scroll touchmove", function() {
windowHeight = $(window).outerHeight();
domHeight = $(document).outerHeight() - windowHeight;
calculateHeight();
});
function calculateHeight() {
var scroll = $(window).scrollTop();
if( scroll >= domHeight ) {
changeScrollFill($(".scrolled"), 100);
}
else if( scroll <= 0 ) {
changeScrollFill($(".scrolled"), 0);
}
else {
var calc = (scroll*100)/(domHeight);
changeScrollFill($(".scrolled"), calc);
}
}
function changeScrollFill(obj, percent) {
if(position == "top" || position == "bottom") {
$(obj).css({
"width": percent+"%"
});
}
else {
$(obj).css({
"height": percent+"%"
});
}
}
}
})
})(jQuery);* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding-top: 10px;
}
body .container {
max-width: 1280px;
margin: auto;
border: 1px solid #000;
padding: 20px;
}
body .total-scroll-container {
position: fixed;
background-color: #fff;
z-index: 100;
}
body .total-scroll-container.top {
top: 0;
left: 0;
right: 0;
height: 10px;
}
body .total-scroll-container.bottom {
bottom: 0;
left: 0;
right: 0;
height: 10px;
}
body .total-scroll-container.left {
top: 0;
left: 0;
bottom: 0;
width: 10px;
}
body .total-scroll-container.right {
top: 0;
right: 0;
bottom: 0;
width: 10px;
}
body .total-scroll-container.top .scrolled,
body .total-scroll-container.bottom .scrolled {
height: 100%;
width: 0;
}
body .total-scroll-container.left .scrolled,
body .total-scroll-container.right .scrolled {
width: 100%;
height: 0;
}
body .scrolled {
position: absolute;
background-color: greenyellow;
}
h1 {
margin-bottom: 15px;
}
p {
margin-bottom: 15px;
}
p:last-child {
margin-bottom: 0;
}
p img {
width: 100%;
display: block;
}
.zoo {
height: 300px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="total-scroll-container"></div>
<h1>Scrolling indicator</h1>
<p>Sometimes, you want to let know the user how far from the end of the article of the page the user is.</p>
<p class="zoo"></p>
<p>For those cases, we did our own code to show the user the percetage of the whole page "read" in real time.</p>
<p>If you keep scrolling through this page, you can see a greeny bar growing and shrinking depending on if you are scrolling down or up. It's all dynamic. It doesn't matter if the page grows because you made the window bigger or smaller, it always calculates the percentage scrolled and it will make the bar bigger or smaller.</p>
<p class="zoo"></p>
</div>
<script>
$(document).ready(function() {
$(".total-scroll-container").WETotalScroll({
"position": "top"
});
});
</script>