0

滚动浏览网站时，我使用此代码显示/隐藏 div。我的问题是当 div#top到达浏览器窗口的顶部时会出现 div。我需要.news当 div#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/应该出现绿色框，当蓝色框开始从页面底部出现时。

4

2 回答 2

1

您也应该考虑窗口高度。我已经更新了小提琴。变化在于从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();
        }
    });
});
于 2013-09-12T04:25:17.143 回答
1

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

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

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

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

于 2013-09-12T04:27:59.383 回答