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>

CodePudding user response：

I guess this is exactly what you looking for:

Demo

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