I'm trying to make the footer fade in after 1000px, but it jumps on the screen immediately. I'm making this in Jquery so I tried the fadeIn(),but with zero result. I also tried to make the footer disappear with the fadeout(), but also with zero result. Am I doing something wrong?
Thanks!
//effect to make the footer appear after some px
jQuery(function($){
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1000) {
$('footer').show().fadeIn("slow");
} else {
$('footer').hide().fadeOut();
}
});
});
<!--Footer-->
<div id="ft" class="page-wrap">
<main>
<section>
</section>
</main>
<footer>
<small>
- Footer -
<p>Contenido Lorem ipsum dolor</p>
<p>lorem ipsum</p>
</small>
</footer>
</div>
I guess this is exactly what you looking for:
JQuery
$(window).scroll(function(event) {
function footer()
{
var scroll = $(window).scrollTop();
if(scroll>20)
{
$("footer").fadeIn("slow").addClass("show");
}
else
{
$("footer").fadeOut("slow").removeClass("show");
}
}
footer();
});