fabianabarca / buses

Sitio web con información GTFS del transporte público elaborado por el proyecto TC-691 "Tropicalización de la Tecnología" de la Universidad de Costa Rica.
3 stars 5 forks source link

header nav de permanecer sin efecto es mejor con sticky #65

Open jeancahu opened 3 years ago

jeancahu commented 3 years ago

La barra horizontal de navegación en la parte de arriba de la página en su forma para desktop, originalmente viene con la siguiente clase de css.

.header-sticky-top-lg {
    position: fixed;
    bottom: auto;
    top: 0;
}

la position de tipo fixed no introduce un área en el documento, al igual que el absolute no se posiciona entre los otros elementos, lo que hace que todos los demás elementos ignoren su existencia.

el siguiente elemento en el documento es el main este elemento empieza desde arriba de la página, se traslapa con el topbar porque lo ignora y se muestra por debajo del esta barra. Para evitar esto el creador del tema introdujo un espacio vertical al inicio de main igual en alto al de la barra, esto normalmente no se hace así pero el diseñador lo hizo porque él quería que el tema tuviera un efecto en el que la barra se desaparece y aparece conforme se hace scroll hacia abajo o hacia arriba.

Actualmente el efecto ha dejado de funcionar o está desactivado, de dejarlo así entonces ya no tendría sentido mantener el fixed, para evitar tener que dejar ese espacio vacío en main lo mejor sería usar sticky el cual SI posiciona en el documento, obligando a los demás elementos a ordenarse respetando el área de la barra. para esto se podría hacer con la siguiente clase:

.custom-header-sticky-top-lg {
    position: sticky;
    bottom: auto;
    top: 0;
}