Cerrar Ventana

Algunas cookies de este sitio son esenciales, y el sitio no funcionará como se espera sin ellas. Estas cookies se establecen en el momento de enviar un formulario, inicie sesión o interactuar con el sitio realizando una acción que va más allá de hacer clic en un simple enlace.


Leer Más

Somos un foro de soporte en español que no tiene publicidad y tiene muchas cosas gratuitas aportadas por la comunidad, contribuye con el foro para poder así obtener alguna membresía de manera gratuita.
SoporteMyBB tiene un total de
1124 temas de soporte.
0 quedan aún por resolver, 244 han quedado obsoletos y 880 han sido resueltos.
Aún no tienes una cuenta, regístrate es gratis.

Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutorial] Header Fixed (Sticky)
 eNvy
Usuario del Foro
eNvy
Estado: Sin conexión Registrados
36
252
180
Argentina
0
2
180
54
25 September 2014, 12:46
#1
5
Éste tutorial lo dejaron los usuarios de mi foro, así que créditos a ellos ^^.

Paso 1: Headerinclude

<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

#panel.wichtig {
    
positionfixed;
    
top0;
    
left0;
    
width100%;
    
z-index1;


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.
 
 calamar
Usuarios
calamar
Estado:
 
0
0
0
0
25 September 2014, 17:51
#2
0
Cosa mas sencilla y funcional. Hacía tiempo me preguntaba de como era esta función. @eNvy me has alegrado el día
Aquí van mis gracias y a disfrutar.

Vaya, vaya Sonrisa Sonrisa Sonrisa (Espero funcione en temas como el default de la versión 1.8)
Editando.
======
Si que funciona en el default.

Saludos.
 
 Yadomi
http://abstractos.net

Estado: Sin conexión Registrados
26
133
53
Spain
0
3
53
48
25 September 2014, 21:53
#3
0
Personalmente no me gusta, está mejor para móviles creo yo.
Como sea, ¡gracias!
 
 calamar
Usuarios
calamar
Estado:
 
0
0
0
0
25 September 2014, 22:38
#4
0
(25 September 2014, 21:53 )Jaizu escribió: Registrate o inicia tu sesión para ver este contenidoPersonalmente no me gusta, está mejor para móviles creo yo.
Como sea, ¡gracias!

Es cuestión de gustos, lo veo bien la verdad para móviles también. Depende de tu foro. Aun así es muy eficaz para no dejar el panel de usuario.
Contra los gustos, los colores esto es cierto.

Yo en mi foro lo he aplicado.

Saludos. !!!
 
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
25 September 2014, 23:35
#5
1
Es bueno tener muchas cosas a muchos les gustaran y a otros no. El punto final es compartir la info, ya que muchos nisiquiera se toman la molestia de hacerlo y eso si que es una lastima.  Gracias por el aporte 
 
 calamar
Usuarios
calamar
Estado:
 
0
0
0
0
25 September 2014, 23:43
#6
0
Así funciona o debe funcionar el sistema.  Te puede gustar o no, el problema es si no se comparte, nadie se entera y entonces, el cajón de cada se llena de tal forma que será un olvido.

A esto se le llama 'Free code' (otros nombres mas..) lo demás para que escribir y malgastar tu tiempo y vida... Es así?
Repito y doy las gracias a @eNvy por compartir el código.
 
 eNvy
Usuario del Foro
eNvy
Estado: Sin conexión Registrados
36
252
180
Argentina
0
2
180
54
26 September 2014, 06:15
#7
0
Gracias por los comentarios a todos.

La verdad es que puede gustar o no, a mi personalmente dependiendo del diseño creo que puede tener un muy buen uso, y quizás para otros no tanto... es cuestión de aplicarlo o no.

Así como hay gente que le gustan los sidebars, a otros no, etc.

La idea final es compartir.

Saludos!
 
 Jean Pierre
High Hopes

Estado: Sin conexión Registrados
24
291
112
Peru
0
0
112
22
27 September 2014, 18:46
#8
0
Buen tutorial, alguna vez usé un script de sticky que hacía prácticamente lo mismo, no necesariamente el contenedor fijo debía estar arriba siempre, por ejemplo, supongamos que está a 100 pixeles del top de la página, al bajar el scroll este contenedor subirá, una vez llegue a la parte superior debería perderse al seguir bajando el scroll, pero ahí actúa el script, hace que se quede fijo, es muy bueno Sonrisa

Yo por mi parto lo hago con CSS, claro, con esto el contenedor tiene que estar siempre arriba, gracias por el source Lengua
 
 Yadomi
http://abstractos.net

Estado: Sin conexión Registrados
26
133
53
Spain
0
3
53
48
5 October 2014, 22:23
#9
0
Me encanta este ambiente la verdad, pero que no me hayáis mal interpretado, agradezco el aporte y apoyo que haya alternativas, solo era una simple opinión de dónde usarlo :D
 
 Whiteneo
Equipo de Soporte

Estado: Sin conexión Soporte Técnico
354
4,693
Mexico
5
93
576
5 October 2014, 22:38
#10
0
Venga @Jaizu aqui no hay malas cosas la verdad se aprecia todo tipo de comentarios y opiniones claor que muchos diferimos de otras opiniones de usuarios, pero eso es lo que hace un buen foro, tener algunos debates interesantes que puedan servir a otros y sin objeto ni ánimo de ofender a otros o esas cosas, de lo contrario todos esosmensajes son eliminados, en caso de esto o de no respetar las reglas del foro que planteamos desde un inicio :D

Saludos.
 




Usuarios navegando en este tema: 1 invitado(s)