Home / Questions / 265073
Accepted
Damian Garcia
Asked: 2020-05-21 04:54:04 +0800 CST 2020-05-21 04:54:04 +0800 CST

Put a fixed centered div and hide it in the header and footer

  • 772

I have a fixed div located below the page ( <div class="Letras">). What I cannot achieve with said div is that it stays centered . On top of that, I'd like the div to only start displaying when the user leaves the page header (scrolling down) and pop it out before it reaches the end (to the footer). In short, it should always be seen when it is in the middle of the page (which is where the content for which it will make use of that fixed div is).

If it helps here I leave you some of the Code that I put together in codepen. They need to be moved down a bit for the div to appear. There you can also read the comments I left.

jquery

1 Answers

  1. Best Answer

    In the end I was able to fix both issues I was having with the div pinned to the footer.

    1) Center the sticky div to the footer : I had to add a wrapper div ( <div class="Container">) with the following properties:

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

    and then to the div that is inside ( <div class="Letras">) <div class="Container">I put the following properties:

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

    Inside the html in the body I have it like this <div class="Container"><div class="Letras"><ul id="alfabeto"></ul></div></div>. The good thing is that it has worked for me in different browsers and screen resolutions. I always stay focused. This can be seen from here , the code that I have modified in Codepen.

    1) Hide the div in the header and footer : Here I was able to only show the div with the letters of the alphabet when scrolling and in certain parts of the page (for example, it is not displayed in the header or at the bottom of the page). For this case I work with Jqueryand with the function scroll. The part of the code that does the job is as follows:

    $(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");
            }
         }
    });
  });

    First I hide the div where the letters are ( $('.Letras').hide()) and then inside the function scrollI start working with different values: the one obtained when scrolling the page ( $(window).scrollTop()), the one from the header div ( $("#ContIT")) and the div that is at the bottom ( $("#Barra")).

    The if of window.matchMediame allow to work according to the device and its resolution, since it will change the dimensions and their values ​​depending on the device used. Then I show or hide the div depending on the values ​​that the variables have.

    Note : In the part of the code another element appears ( $("img#Fle-Mostrar"), being only an arrow image) which is the one that replaces the alphabet ( $('.Letras')) when the previous one is hidden and vice versa. This is not relevant to the problem posed.

    • 0