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.
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP