Estoy usando el siguiente código para tener un desplazamiento suave a la sección cuando hacemos clic en un elemento del menú de navegación:
// handle links with @href started with '#' only $(document).on('click', 'a[href^="#"]', function(e) { // target element id var id = $(this).attr('href'); // target element var $id = $(id); if ($id.length === 0) { return; } // prevent standard hash navigation (avoid blinking in IE) e.preventDefault(); // top position relative to the document var pos = $id.offset().top; // animated top scrolling $('body, html').animate({scrollTop: pos}, 2000); });
Sin embargo, necesitaba colocar el encabezado en una posición fija, con una altura de 90 px y ahora, cuando nos desplazamos a la sección, el comienzo de la sección se oculta detrás de la sección. ¿Es posible mantener mi código e incluir, por ejemplo, una cierta distancia desde la parte superior?
Traté de poner un parámetro en el método de compensación pero no funcionó:
// handle links with @href started with '#' only $(document).on('click', 'a[href^="#"]', function(e) { // target element id var id = $(this).attr('href'); // target element var $id = $(id); if ($id.length === 0) { return; } // prevent standard hash navigation (avoid blinking in IE) e.preventDefault(); // top position relative to the document var pos = $id.offset(top:120).top; // animated top scrolling $('body, html').animate({scrollTop: pos}, 2000); });
¿Estoy haciendo algo mal?
var pos = $id.offset().top - 90;
¿Es lo que quieres decir?