1

我一直在尝试根据屏幕高度隐藏和显示一个固定的 div。它适用于手机，只要出现滚动条，就会出现 div。这适用于小屏幕。

这是我正在使用的代码

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

你可以看到我在这个Jsfiddle上完成了什么。

如果您还想从我这里得到什么，请告诉我。我确信我使用的代码有一些错误。

4

4 回答 4

1

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

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

jquery->jQuery

textdiv->.textdiv

于 2013-01-26T01:47:06.280 回答
0

您正在使用的选择器正在寻找一个textdiv明显不存在的标记名。在选择器中为类添加点前缀

$(".textdiv").fadeIn(200);
于 2013-01-26T01:47:12.577 回答
0

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

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  .yourclass {
    display:none;
  }
}
于 2013-01-26T01:48:58.470 回答
0

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

查看下面的代码，然后查看 JS fiddle ......

$(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/

于 2013-01-27T16:56:46.660 回答