Question

我一直试图隐藏并根据屏幕高度显示固定的div。这是一种移动电话，当滚动条出现时，会出现div。这适用于较小的屏幕。

这是我正在使用的代码

$(document).ready(function () {
    if ($("body").height() > $(window).height()) {
        jquery("textdiv").fadeIn(200);
    } else {
        jquery("textdiv").hide(100);
    }
});

你可以看到我在Jsfiddle上所取得的成就。

如果您还有其他任何想要我的信息，请告诉我。我确信我使用的代码有一些错误。

Answer 1

你所拥有的似乎工作正常，你只是有一些文字错误：

http://jsfiddle.net/NLjqK/1/

jquery - ＆gt; jQuery

textdiv - ＆gt; .textdiv

Answer 2

您正在使用的选择器正在寻找显然不存在的textdiv标记名。在选择器

中为类添加点前缀

$(".textdiv").fadeIn(200);

Answer 3

如果您正在寻找响应式设计，那么css可能是在jquery中执行操作的更好选择。在屏幕宽度的情况下，您可以将媒体查询用作各种属性的“if / else”函数。请阅读here。这是一个例子：

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  .yourclass {
    display:none;
  }
}

Answer 4

如果其他人正在寻找类似的东西，我已经进一步研究了Explosion Pills的答案，并添加了额外的代码，当窗口调整大小时代码运行，当有人向下滚动到底部时div消失页。

查看下面的代码，然后JS小提琴......

$(window).bind('resize',function () {

    if ($("body").height() > $(window).height()) {
        jQuery(".textdiv").fadeIn(200);
    } else {
        jQuery(".textdiv").hide(100);
    }
});

$(window).scroll(function() {
                if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
                    $(".textdiv").css("display","none");
                }else {
                    $(".textdiv").css("display","block");
                }
            });

http://jsfiddle.net/NWusD/

当身高超过视口高度时隐藏和显示div

4 个答案: