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

How to show a DIV when users reach X pixels from the bottom of the page

本文关键字：何显示 DIV 显示 像素 用户 底部      更新时间：2023-09-26

我使用以下代码在用户到达屏幕底部后显示横幅。问题是我注意到大多数用户直到最后都不会向下滚动。我应该修改什么才能显示我的div .banner3，比如说，从底部150px？非常感谢

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

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

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

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

$(document).ready(function() {
            $(window).scroll(function() {
                if($(this).scrollTop() > $(window).height()-150){
                 $('.banner').fadeIn();
                }else{
                 $('.banner').fadeOut();
                }
            });
        });
相关文章：