Seleccionar página

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

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/

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad