javier | JavierLeal.com

Ocultar menú en scrolldown de forma suave

HTML

<nav>xxxxxx</nav>

Javascript

//////////////////////////////////////////////
	//===> Ocultar el menú en scrolldown
var confScrolldown = {
	//Número de scroll en pixels donde se comienza a ocultar el menú
	offsetOcultar: 20,
};
var $navbarSuperior = $("nav");
var offsetActualParaOcultar = 0;
var prevScrollpos = $(window).scrollTop();
var alturaMenuNav = $navbarSuperior.outerHeight();
$(window).scroll(function() {
	var currentScrollPos = $(window).scrollTop();
	if (prevScrollpos > currentScrollPos) {
		//$navbarSuperior.css("top",'0'); //<=sin animación
		$navbarSuperior.stop().animate({ top: 0 }, 100);
		offsetActualParaOcultar = 0;
	} else {
		//$navbarSuperior.css("top",'-'+alturaMenuNav+'px');  //<=sin animación
		offsetActualParaOcultar++;
		if(offsetActualParaOcultar>=confScrolldown.offsetOcultar)
		{
			//Sólo realizará la animación si ha scrolleado los píxeles indicados en confScrolldown.offsetOcultar
			$navbarSuperior.stop().animate({ top: -alturaMenuNav }, 800);
		}
	}
	prevScrollpos = currentScrollPos;
});

Referencias:
https://codepen.io/JTParrett/pen/CAglw
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll

Barra indicadora del porcentaje de scroll vertical

Recortes de código

HTML

<div class="barra-porcentaje-scroll"></div>

Javascript

$(window).scroll(function() {
    //Calcular el porcentaje que el usuario ha scrolleado y mostrarlo en la barrita superior
    var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
    $('.barra-porcentaje-scroll').css('width', scrollPercent +"%"  );
});

CSS

.barra-porcentaje-scroll
{
    height: 5px;
    background-color: #009ACF;
    width: 0px;
    z-index: 2;
    position: fixed;
    left: 0;
}

http://jsfiddle.net/SnJXQ/2/

Manipular el rebote de Google

Enlaces

Considerar que manipular el rebote es cambiar sólo la forma de visualizar los datos de analytics. No cambiará los parámetros de posicionamiento, pero sí nos adaptará el análisis en base a nuestras preferencias sobre cómo queremos que actúen nuestros usuarios.