Question

我的页脚中有一个按钮，一旦用户到达屏幕底部就会淡入。

HTML - 内部标记

 <script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()){
    isShown = true;
    $('.footer-btn').fadeIn(500);
}
});
</script>

我希望它在用户到达底部之前淡入150像素，而不是绝对底部。此外，我希望它在用户向上滚动时淡出。但我不确定如何添加到我的代码中以实现它。

Answer 1

从文档高度减去150并将else写入fedout。

<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()-150){
    isShown = true;
    $('.footer-btn').fadeIn(500);
}else{
    $('.footer-btn').fadeOut(500);
}
});
</script>

Answer 2

试试这个：

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() > ($(document).height() - 150)) {
        $(".btn").fadeIn(1000);
    } else {
        $(".btn").fadeOut(1000);
    }
});

在这里工作小提琴：JSFIDDLE

按钮淡入屏幕底部

2 个答案: