javascript - 从页面底部开始滚动显示/隐藏 div

Question

我使用此代码在滚动浏览网站时显示/隐藏 div。我的问题是 div 出现在例如div #top 到达浏览器窗口的顶部。我需要当 div #top 开始出现在浏览器窗口底部并以相同方式消失时， .news div 就会出现。

  $(document).ready(function () {
    var topOfOtheDiv3 = $("#top").offset().top;
    var topOfOtheDiv4 = $("#bottom").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOtheDiv3 && $(window).scrollTop() < topOfOtheDiv4) {
            $(".news").show();
        } else {
            $(".news").hide();
        }
    });
});

这是我发现的 fiddle http://jsfiddle.net/4r5kn/10/当页面底部开始出现蓝色框时，应出现绿色框。

Answer 1

您还应该考虑窗口高度。我有updated the fiddle 。变化在于从 topOfOthDiv 和 topOfOthDiv2 变量中扣除窗口高度。

$(document).ready(function () {
    var topOfOthDiv = $("#othdiv").offset().top - $(window).height();
    var topOfOthDiv2 = $("#othdiv2").offset().top - $(window).height();

    $(window).scroll(function () {
        var winTop = $(window).scrollTop();
        if (winTop > topOfOthDiv && winTop < topOfOthDiv2) {
            $("#dvid").show();
        } else {
            $("#dvid").hide();
        }
    });
});