Question

我在滚动浏览网站时使用此代码来显示/隐藏div。我的问题是div出现在例如div #top到达浏览器窗口的顶部。当div .news开始显示在浏览器窗口的底部并以相同的方式消失时，我需要#top 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();
        }
    });
});

这是一个小提琴，我发现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();
        }
    });
});

Answer 2

您需要为此添加窗口高度。这将使得div的顶部+窗口高度首先需要在视图中显示：

这是一个小提琴：http://jsfiddle.net/4r5kn/14/

我刚刚在您的代码中添加了var winHeight = $(window).height();
将其添加到if语句if ($(window).scrollTop()+winHeight > topOfOthDiv && $(window).scrollTop()+winHeight < topOfOthDiv2) {
然后瞧。

这样，如果您需要更改或调整高度（假设您希望在页面底部看到div的底部时显示），您可以将该像素数量添加到{ {1}}变量

使用滚动显示/隐藏div，从页面底部开始

2 个答案: