Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Fijar elemento dependiendo del contenido

Estas en el tema de Fijar elemento dependiendo del contenido en el foro de CSS en Foros del Web. Tengo un div, que es una especie de barra de herramientas, con propiedad fixed en la parte baja de la pantalla, más o menos así ...
  #1 (permalink)  
Antiguo 20/04/2018, 12:27
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 16 años, 4 meses
Puntos: 2237
Fijar elemento dependiendo del contenido

Tengo un div, que es una especie de barra de herramientas, con propiedad fixed en la parte baja de la pantalla, más o menos así

- Encabezado con datos de usuario
- Documentos
- Más documentos
- Comentarios
- Más documentos, comentarios, etc.
- Barra de herramientas <- Abajo, siempre visible

El problema es que cuando hay solo un documento, se ve demasiado espacio vacío y la barra no parece formar parte del conjunto.

- Encabezado
- Un documento
---- Mucho espacio vacío ----
- Barra de herramientas

¿Hay alguna manera (CSS o Javascript) de tener este elemento en el flujo normal del HTML cuando hay poco contenido y fijarlo abajo cuando ya hay más material?

¡Gracias de antemano!
__________________
- León, Guanajuato
- GV-Foto
  #2 (permalink)  
Antiguo 20/04/2018, 13:10
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 16 años, 4 meses
Puntos: 2237
Respuesta: Fijar elemento dependiendo del contenido

Agregué esta función al cargar la página y funciona correctamente.

Código Javascript:
Ver original
  1. function fixActions() {
  2.     var subAcc = $("#sub-actions");
  3.     if(subAcc && subAcc.length > 0) {
  4.         var bottom = $(window).height() - subAcc.offset().top - subAcc.height();
  5.         if(bottom < 0) {
  6.             subAcc.addClass('sub-fixed');
  7.         } else {
  8.             subAcc.removeClass('sub-fixed');
  9.         }
  10.     }
  11. }

También pude solucionarlo cuando se cambia el tamaño de la pantalla agregando la siguiente función:

Código Javascript:
Ver original
  1. $(window).bind('resize', function() {
  2.     fixActions();
  3. });

Al menos en Opera:
- Maximizar ventana: Se ejecuta dos veces la función y la segunda es incorrecta!
- Restaurar ventana: Funciona perfecto.

Edito: Al parecer, es la consola lo que da problemas al maximizar la ventana, la cerré y todo funciona bien.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 20/04/2018, 13:50
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 9 meses
Puntos: 1826
Respuesta: Fijar elemento dependiendo del contenido

En lo personal creo que la opción de dejarlo hasta abajo, independientemente de si hay espacio se me hace mejor opción.
  #4 (permalink)  
Antiguo 20/04/2018, 14:32
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 22 años, 6 meses
Puntos: 177
Respuesta: Fijar elemento dependiendo del contenido

y porque no incorporar la barra de herramientas al header y tener todo ahi 'a mano' ?
Que tiene la barra de herramientas?
Para que sirven esas herramientas?
Cambian según sección o son siempre las mismas?

Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #5 (permalink)  
Antiguo 23/04/2018, 09:37
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 16 años, 4 meses
Puntos: 2237
Respuesta: Fijar elemento dependiendo del contenido

Gracias por comentar y respondo sus dudas:

Es una web educativa donde se va agregando material y comentarios; la idea es que la barra de herramientas siempre esté a la mano, lo más cerca posible del último material agregado; originalmente estaba fija, siempre arriba, pero es más funcional como quedó ahora.

¿Qué tiene la barra de herramientas, para qué sirven esas herramientas?
Son botones para publicar contenido, cambiar el estado del tema y formulario para iniciar una conversación o agregar observaciones respecto al avance.

¿Cambian según sección o siempre son las mismas?
El aspecto siempre es el mismo, pero los botones cambian de acuerdo al desarrollo y estado del tema.
__________________
- León, Guanajuato
- GV-Foto

Etiquetas: contenido, dependiendo, elemento, fijar, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 09:39.