时间戳

首页 > 解决方案 > 如何在jquery中使滚动页脚淡入？

javascript - 如何在jquery中使滚动页脚淡入？

问题描述

我试图让页脚在 1000 像素后淡入，但它会立即跳到屏幕上。我在 Jquery 中做这个，所以我尝试了 fadeIn()，但结果为零。我还尝试使用淡出（）使页脚消失，​​但结果也为零。难道我做错了什么？

谢谢！

//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>

标签： javascripthtmljquerycssfooter

解决方案

我想这正是你要找的：

演示

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

推荐阅读