menú siempre visible

Cómo hacer con css y js que un menú siempre esté visible en la pantalla.

archivado en: JavaScript / 18 febrero, 2016

Tras tres o cuatro semanas en las que el curro me ha tenido fuera de juego, ando estos días retocando cosas del blog, de lo que hay por debajo. Aún estoy lejos de lo que me interesa, que es desacoplar totalmente el front del back a través de algún intermediario rest, tipo el frame slim, una tarea que me llevaría más tiempo del que dispongo últimamente, pero al menos he optimizado algunas características y creo que he mejorado un poco la usabilidad. A falta de algunas páginas php que aún no he refactorizado, el tema está en git hub, por si a alguien le interesa adaptarlo para sus cosas.

Una de las nuevas funcionalidades que he implementado es que el menú de las categorías esté siempre visible. Así, cuando se hace scroll, deja su posición natural, en la parte superior del layout de las últimas entradas...

menu-sup

... y se sitúa en un lateral.

menu-lat

La jugada es más sencilla que un botijo:

  1. Al cargar la página tomamos la referencia de la coordenada y de lo que queremos que se muestre siempre.
  2. Lanzamos una escucha cuando se scrollea.
  3. Si el elemento se encuentra fuera del scroll, añadimos una clase con el position fixed.

En código. Las css:

.fixed-left {

position: fixed;

top: 10px;

left: 12px;

border: 1px solid #ccc;

...

El javaScript:

var navbar = {

coordsScroll: 0,

status: 'top',

addListeners: function(searchValue) {

var self = this;

window.onscroll=function() {

var doc = document.documentElement,

top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

if ( top > self.coordsScroll ) {

if ( self.status == 'top' ) {

self.setToLeft();

}

} else {

if ( self.status == 'left' ) {

self.setToTop();

}

}

}

},

setToLeft: function() {

document.getElementById('js-secondaryNav').classList.add('fixed-left');

this.status = 'left';

},

setToTop: function() {

document.getElementById('js-secondaryNav').classList.remove('fixed-left');

this.status = 'top';

},

initCoords: function() {

var rect = document.getElementById('js-secondaryNav').getBoundingClientRect();

this.coordsScroll = Math.round(rect.top);

},

init: function() {

this.initCoords();

this.addListeners();

}

};

document.addEventListener('DOMContentLoaded', function(){

navbar.init();

}, false);

|| Tags: , ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*