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.