Tengo este código de jQuery:
(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);
El plug-in básicamente muestra una barra que crece y decrece dependiendo en cuanto hayas hecho scroll en la página.
En local con dispositivos (android y iPhone) funciona bien, cuando llega al final de la página la barra está llena. Cuando la barra de direcciones desaparece éste recalcula la altura de la ventana correctamente. Pero cuando está en el servidor (ya en vivo) siempre deja un hueco vacío, ya que no recalcula la altura de la barra de dirección desaparece impidiendo así que ésta se llene.
Debajo dejo el código snippet, por si lo queréis probar. Como dije, esto en local tanto con dispositivos android como iOS funciona bien, pero es cuando lo subo a producción cuando no lo hace.
(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>