25 September 2014, 12:46
5
Éste tutorial lo dejaron los usuarios de mi foro, así que créditos a ellos ^^.
Paso 1: Headerinclude
Paso 2: CSS
Y qué hace ésto? Bueno, tienen el mismo ejemplo aquí en forosmybb, si ustedes navegan hacia abajo, el header (Que contiene el menú de Perfil, Mensajes, Nuevos temas, Alertas y Color se desliza mientras navegan, haciendo más cómoda la navegación para el usuario).
Éste tutorial utiliza jQuery para añadir una clase específica a un elemento, en éste caso el ID "#panel" sería nuestro header, y se le agrega la clase "wichtig" para hacerlo fixed. Con esto ustedes pueden estilizar su "#panel" a gusto, y luego la clase especial para hacerlo fixed se añade solita. Además, revisa si la posición de la ventana es correcta, y aclara el scroll hacia arriba para que no tengan problemas con el mismo.
Por supuesto, ustedes pueden cambiar tanto "#panel" como "wichtig" por el nombre que quieran, recuerden hacerlo tanto en el código jQuery como en el css.
Y eso es todo! Muy simple, y funciona de maravillas.
Yo personalmente añado una modificación mínima que es el "z-index: 1" para que cuando esten utilizando este código y quieran hacer login en su sitio, no se superponga el header con el login =).
Espero les sirva, saludos!
Paso 1: Headerinclude
Código PHP: ( Seleccionar Todo )
<script type="text/javascript">
jQuery(document).ready(function($) {
function wichtig() {
var window_top = $(window).scrollTop();
var top_position = $('body').offset().top;
var element_to_stick = $('#panel');
if (window_top > top_position) {
element_to_stick.addClass('wichtig');
} else {
element_to_stick.removeClass('wichtig');
}
}
$(window).scroll(wichtig);
wichtig();
});
</script>
Paso 2: CSS
Código PHP: ( Seleccionar Todo )
#panel.wichtig {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
Y qué hace ésto? Bueno, tienen el mismo ejemplo aquí en forosmybb, si ustedes navegan hacia abajo, el header (Que contiene el menú de Perfil, Mensajes, Nuevos temas, Alertas y Color se desliza mientras navegan, haciendo más cómoda la navegación para el usuario).
Éste tutorial utiliza jQuery para añadir una clase específica a un elemento, en éste caso el ID "#panel" sería nuestro header, y se le agrega la clase "wichtig" para hacerlo fixed. Con esto ustedes pueden estilizar su "#panel" a gusto, y luego la clase especial para hacerlo fixed se añade solita. Además, revisa si la posición de la ventana es correcta, y aclara el scroll hacia arriba para que no tengan problemas con el mismo.
Por supuesto, ustedes pueden cambiar tanto "#panel" como "wichtig" por el nombre que quieran, recuerden hacerlo tanto en el código jQuery como en el css.
Y eso es todo! Muy simple, y funciona de maravillas.
Yo personalmente añado una modificación mínima que es el "z-index: 1" para que cuando esten utilizando este código y quieran hacer login en su sitio, no se superponga el header con el login =).
Espero les sirva, saludos!
Última modificación: 25 September 2014, 12:47 por eNvy.