Question

当用户到达屏幕底部时，我正在使用下面的代码显示横幅。问题是我注意到大多数用户不会向下滚动直到结束。我应该修改什么来显示我的div .banner3，比方说，150px从底部开始？非常感谢

$(document).ready(function() {
    $(window).scroll(function() {
        if($("body").height() <= ($(window).height() + $(window).scrollTop())) {
            $(".banner3").fadeIn()
        } else {
            $(".banner3").css("display","none");
        }
    });
});

Answer 1

$(window).height() + $(window).scrollTop() - 150

简单的东西：）

您也可以更好地重写代码。 scroll事件被多次触发，因此您可以对选择器进行一些缓存。

$(function() {
    var banner = $(".banner3");
    var bodyHeight = $("body").height();
    $(window).scroll(function() {
        if (bodyHeight <= $(window).height() + $(window).scrollTop() - 150) {
            banner.fadeIn();
        } else {
            banner.hide();
        }
    });
});

Answer 2

编辑：忘了再次隐藏横幅......

http://jsfiddle.net/kasperfish/RBndE/1/

$(document).ready(function() {
            $(window).scroll(function() {

                if($(this).scrollTop() > $(window).height()-150){
                 $('.banner').fadeIn();
                }else{
                 $('.banner').fadeOut();
                }
            });
        });

如何在用户从页面底部到达X像素时显示DIV

2 个答案: