0

Tengo un div fijo ubicado debajo de la página (<div class="Letras">). Lo que no puedo lograr con dicho div es que el mismo me quede centrado. Además de eso, me gustaría que el div sólo se empiece a mostrar cuando el usuario abandona el encabezado de página (bajando haciendo scroll) y sacarlo antes de que llegue al final (al footer). En definitiva, que se vea siempre cuando está en el medio de la página (que es dónde está el contenido para el cual hará uso de ese div fijo).

Si sirve de ayuda acá les dejo algo del Código que arme en codepen. Deben moverse un poco hacia abajo para que aparezca el div. Ahí también pueden leer los comentarios que deje.

1 respuesta 1

0

Al final pude solucionar ambos problemas que tenía con el div fijado al pie de la página.

1) Centrar el div fijo al pie de la página: Tuve que agregar un div contenedor (<div class="Container">) con las siguientes propiedades:

.Container 
{
    z-index:999;   
    position: fixed;
    width: 100%;
    text-align: center;
    bottom: 0;
}  

y después al div que está dentro (<div class="Letras">) del <div class="Container"> le puse las siguientes propiedades:

.Letras {
    position: relative;
    bottom: 0;
    z-index:999;
}

Dentro del html en el body lo tengo así <div class="Container"><div class="Letras"><ul id="alfabeto"></ul></div></div>. Lo bueno es que me ha funcionado en diferentes navegadores y resoluciones de pantalla. Siempre me queda centrado. Esto se puede visualizar desde acá, el código que he modificado en Codepen.

1) Ocultar el div en el encabeza y pie de página: Acá ya pude lograr que sólo se muestre el div con las letras del alfabeto cuando se hace scroll y en determinas partes de la página (por ejemplo no se visualiza ni en la cabecera ni en el pie de la página). Para este caso trabajo con Jquery y con la función scroll. La parte del código que hace el trabajo es el siguiente:

$(function() {
...
...
    $('.Letras').hide();
     $(window).scroll(function(){
         var windowPosY = $(window).scrollTop();
         var Sup = $("#ContIT").offset().top;
         var Inf = $("#Barra").offset().top; 
         if (window.matchMedia("(max-width: 481px)").matches) {
            if (windowPosY >= Sup + 100 && windowPosY < Inf - 700){ 
                if($('img#Fle-Mostrar').css('display') == 'none'){
                    $('.Letras').show();}else{$("img#Fle-Mostrar").css("display","block");}         
            }else{
                $('.Letras').hide();
                $("img#Fle-Mostrar").css("display","none");
                }
        }
         else if (window.matchMedia("(max-width: 1280px)").matches) {
             if (windowPosY < Inf - 600){   
                if($('img#Fle-Mostrar').css('display') == 'none'){
                    $('.Letras').show();}else{$("img#Fle-Mostrar").css("display","block");}         
            }else{
                $('.Letras').hide();
                $("img#Fle-Mostrar").css("display","none");
            }
         }
         else {
             if (windowPosY < Inf - 800){   
                if($('img#Fle-Mostrar').css('display') == 'none'){
                    $('.Letras').show();}else{$("img#Fle-Mostrar").css("display","block");}         
            }else{
                $('.Letras').hide();
                $("img#Fle-Mostrar").css("display","none");
            }
         }
    });
  });

Primero oculto el div en donde estan las letras ($('.Letras').hide()) y luego dentro de la función del scroll empiezo a trabajar con diferentes valores: el que se obtienen al hacer el scroll en la página ($(window).scrollTop()), el del div de cabecera ($("#ContIT")) y el div que está al pie ($("#Barra")).

Los if de window.matchMedia me permiten trabajar según el dispositivo y su resolución, ya que va a cambiar las dimensiones y sus valores dependiendo el dispositivo utilizado. Luego muestro o oculto el div según los valores que vaya teniendo las variables.

Nota: En la parte del código aparece otro elemento ($("img#Fle-Mostrar"), siendo sólo una imagen de flecha) que es el que reemplaza al del alfabeto ($('.Letras')) cuando el anterior se oculta y viceversa. Este no viene al caso para el problema planteado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.