jQuery如何计算实际屏幕距离？答案

【问题标题】：How to calculate the actual screen distance jQuery?jQuery如何计算实际屏幕距离？
【发布时间】：2013-08-22 04:06:54
【问题描述】：

我想在页面列中放置一个广告。当我向下滚动时，我希望广告一直跟随，但位于页面的垂直中间。现在使用脚本只能设置一定的距离，不能设置准确的50%距离。

我已经厌倦了$window.height()/2 或$document.height()/2，但他们计算的是我的表格高度而不是实际的屏幕高度。如何解决这个问题？谢谢！

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
$(function () {

var $sidebar = $("#sidebar"),
    $window = $(window);

$window.scroll(function () {
    if ($window.scrollTop() > $window.height() / 2) {

        $sidebar.css('position', 'absolute');
        $sidebar.css('top', $window.scrollTop() + $window.height() / 2);
        $sidebar.slideDown(500);
    } else {
        $sidebar.css('position', 'auto');
        $sidebar.css('top', 'auto');
    }
});

});
</script>
</head>

<body>

<br><br>
<table bgcolor="#CCCCCC" width="800" height="3000" align="center" border="1">
<tr>
<td width="150" valign="top">
<div style="width:100px;height:100;background:white;"></div>
<br>
<div style="width:100px;height:100;background:blue;"></div>
<br>
<div style="width:100px;height:100;background:yellow;"></div>
<br>
<div style="width:100px;height:100;background:pink;"></div>
<br>
<div style="width:100px;height:100;background:maroon;"></div>
<br>
<!-- AD -->
<div style="width:100px;height:100;background:red;" id="sidebar">test</div>

<br>

</td>
<td width="500"></td>
<td width="150"></td>
</tr>
</table>

</body>
</html>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

从 jquery 文档中，$(window).height(); 应该返回浏览器视口的高度。

我代表基于你的 html 和 js 的演示。它现在看起来像您的网站 :)

看到它：http://jsfiddle.net/FrFsP/1/

【讨论】：

不错，我认为这就是他想要实现的目标.. @IamRan
嗯，它很接近但不完全是......你能检查这个网站吗？ live1.7m.cn 中间一栏的广告一开始会在原地堆叠，只有滚动时才会停留在页面中间。顺便说一句，我复制了你的脚本并进行了测试，发现它只能在 IE 上运行，而不能在 chrome 上运行......
很奇怪，我用的是chrome，我用chrome写了demo……我去现场试试看。
谢谢亲爱的。但仍然只能在 IE 上工作，chrome 不能工作......我应该为这段代码调用什么脚本？这个好吗？ code.jquery.com/jquery-1.9.1.js

【解决方案2】：

尝试screen.height 获取实际高度。 Reference

【讨论】：

【解决方案3】：

您需要window.innerHeight 才能获得真实尺寸（适用于现代浏览器）。看看JavaScript - Get Browser Height 的小包装函数。

【讨论】：

【解决方案4】：

如果我的想法是正确的，我认为this is what you are looking for 看看this example看看是不是这个

如果这不是您要查找的内容，请您再澄清一下吗？

【讨论】：

嗯似乎没有，请检查这个网站看看。 live1.7m.cn/pk_live_ft.aspx?view=odds&match=&line=no
我的意思是页面列内的3个小广告，当它向下滚动时，它会位于页面中间。

【解决方案5】：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

如此处所述：http://api.jquery.com/height/

jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
return this;
}
$("div.target:nth-child(1)").center(true);
$("div.target:nth-child(2)").center(false);

JSFIDDLE DEMO

【讨论】：

无论我把参数改成outerheight还是innerheight或者screen.height，它仍然在计算我的桌子的高度。我滚动红色框是移动我桌子的 1/2 高度而不是屏幕中间。我应该对 HTML 进行一些更改吗？