TransWikia.com

CSS - menú fijo al final de la página

Stack Overflow en español Asked on November 24, 2021

Estoy adaptando un código html para móvil y lo que intento hacer es que aparezca un footer a partir de cierta posición, es decir tu entras en la web y has de "darle" varias veces con el dedo para bajar abajo del todo, mi idea sería que a partir de la linea "x" salga el footer.

De momento solo he conseguido mostrar el footer en formato fijo con este código:

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    background:grey;
    height: 50px;
    clear: both;
}
    <div class="footer">
        <button>TE LLAMAMOS?</button>
    </div>

Gracias y espero vuestras sugerencias.

2 Answers

no entendi del todo , pero si pones tu seccion de footer en donde queres que aparezca a partir de ahi la podes fijar con position sticky

.footer {
    position: sticky;
    top: 90%;/* o 90 vh anda jugando con esos valores  */
    width: 100%;
    color: white;
    text-align: center;
    background:grey;
    height: 50px;
    clear: both;
}

Answered by facu aquino on November 24, 2021

Combinando lo que tienes con jQuery puedes mostrar el footer incluso con un efecto slide para que el cambio no sea tan abrupto.

Debes cambiar la propiedad position: relative; a position: fixed; con jQuery cuando el usuario haya hecho scroll determinada cantidad de pixeles.

$(window).scroll(function() {
  if ($(this).scrollTop() > 200) { //condición a cumplirse cuando el usuario haya bajado mas de 200px.
    $(".footer").css("position", "fixed");//cambio de propiedad css
    $('.footer').slideDown(300); //se muestra el footer en 300 mili segundos
  } else { // si es menor a 200px
    $('.footer').slideUp(300); //se oculta el footer en 300 mili segundos
    $(".footer").css("position", "relative");//cambio de propiedad css
  }
});
.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  background: grey;
  height: 50px;
  clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 align="center">Lorem Ipsum</h1>
<div align="justify">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus egestas quis mi in vehicula. Aliquam tortor justo, dictum id erat vel, bibendum venenatis est. Praesent ornare lorem mauris, sed aliquet ligula aliquet et. Nullam faucibus porta nunc vitae
    viverra. Integer quam elit, pulvinar a magna ut, ultrices eleifend libero. Nullam at lacus ac nisi ullamcorper convallis. Donec vestibulum facilisis arcu vel congue. Vivamus sem sapien, pharetra ut mi a, auctor fermentum nibh. Vivamus lobortis sed
    justo non facilisis.
  </p>
  <p>
    Etiam at ultricies ante, a dictum felis. Integer hendrerit diam ipsum, ac ornare neque viverra at. Sed et leo at velit sodales bibendum eget ut sapien. Vivamus gravida eros quis accumsan pharetra. Donec fringilla tempor mauris, ac luctus odio lacinia
    non. Pellentesque vel imperdiet quam. Aenean tincidunt viverra scelerisque. Fusce sit amet ex massa. Nunc lacus enim, lacinia at ligula ut, rhoncus imperdiet risus. Nam consectetur interdum nunc, quis rhoncus turpis imperdiet quis. Sed orci eros,
    pulvinar ac dapibus vel, volutpat et metus. Nulla ac ante justo. Nullam cursus ligula eget maximus dapibus. Maecenas posuere libero non faucibus pharetra.
  </p>
  <p>
    Maecenas magna metus, sodales non sem eget, lobortis rhoncus urna. Curabitur ullamcorper lacinia est ut facilisis. Cras sollicitudin dui libero, et luctus sem cursus at. Nam consectetur tortor at diam condimentum porttitor. Sed et sapien id nibh pretium
    sodales. In venenatis pretium lectus eget tincidunt. Nunc sagittis, dolor vel sodales auctor, risus mi sodales orci, sed eleifend dolor mauris malesuada velit. Sed ut nisl non nulla interdum blandit commodo quis augue. Maecenas ac velit placerat,
    fermentum nisi et, auctor justo. Phasellus sit amet justo ac augue fringilla maximus. Nam vel nulla tincidunt, pulvinar orci a, condimentum risus. Nulla laoreet dolor lectus, ac lacinia orci gravida at. Nunc dapibus at nibh at interdum. Maecenas et
    luctus arcu, in placerat est. Duis efficitur mauris a lacus bibendum mattis at ac tellus. Aliquam sit amet sollicitudin sapien, vestibulum iaculis metus.
  </p>
  <p>
    Quisque nec euismod augue. Donec nulla augue, laoreet eget tempus sit amet, bibendum ut ante. Quisque a erat in ipsum facilisis consectetur et eget eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras consequat
    id lectus ac iaculis. Donec quis augue orci. Phasellus et massa vel nibh efficitur feugiat. Sed molestie neque in euismod dapibus. Praesent elementum, turpis ac dignissim lacinia, nunc velit efficitur lorem, a tristique est erat a libero. Etiam commodo
    aliquet nisl, eu suscipit turpis vehicula nec. Aenean dignissim, ex eu dictum feugiat, erat ipsum placerat odio, et congue ante lacus sit amet sem. Vestibulum nec fermentum lacus. Nam tincidunt convallis quam, in dapibus mauris lobortis vitae.
  </p>
  <p>
    Etiam congue metus in quam laoreet, eget consequat leo aliquet. Vivamus nulla mauris, consequat et maximus nec, feugiat mollis purus. Duis ac volutpat elit. Aenean accumsan risus non purus imperdiet suscipit eget non nibh. Curabitur blandit suscipit mi
    id ultricies. Cras ut egestas orci. Suspendisse potenti. Maecenas vitae sagittis orci. Pellentesque hendrerit, urna et mollis tincidunt, nisl ipsum aliquet turpis, quis porttitor augue urna at elit. Donec hendrerit est in velit dapibus, et volutpat
    ipsum sollicitudin. Nullam in euismod elit, quis tincidunt turpis. Vestibulum faucibus, arcu ac ullamcorper consectetur, lacus tellus pellentesque elit, nec posuere ex ipsum eu enim.
  </p>
  <br>
  <br>
</div>
<div class="footer">
  <button>TE LLAMAMOS?</button>
</div>

Answered by DjCrazy on November 24, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP