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

Posted 2023-03-21

【中文标题】如何在jquery中使滚动页脚淡入？

【英文标题】：How to make the footer on scroll fade in, in jquery?

【发布时间】：2021-11-20 12:11:01

【问题描述】：

我试图让页脚在 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>

【参考方案1】：

我想这正是你要找的：

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

【讨论】：

例子很好，除非没有理由让function footer()

有人想在多个条件下多次使用它是有原因的。一种可重用的功能。

那么函数应该在滚动事件之外声明。