Javascript 如何计算jQuery的实际屏幕距离？_Javascript_Jquery_Html

Javascript 如何计算jQuery的实际屏幕距离？

javascript jquery html

Javascript 如何计算jQuery的实际屏幕距离？,javascript,jquery,html,Javascript,Jquery,Html,我想在一个页面栏里放一则广告。当我向下滚动时，我希望广告始终跟随，但位置在页面的垂直中间。现在使用脚本只能设置一定的距离，但不能设置精确的50%距离我厌倦了$window.height（）/2或$document.height（）/2，但他们计算的是我的桌子高度，而不是实际屏幕高度。如何解决这个问题？谢谢 <html> <head> <script type='text/javascript' src='http://code.jquery.com/jquery-

我想在一个页面栏里放一则广告。当我向下滚动时，我希望广告始终跟随，但位置在页面的垂直中间。现在使用脚本只能设置一定的距离，但不能设置精确的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>


$（函数（）{
变量$sidebar=$（“#sidebar”），
$window=$（window）；
$window.scroll（函数（）{
如果（$window.scrollTop（）>$window.height（）/2）{
$sidebar.css（'position'，'absolute'）；
$sidebar.css（'top'，$window.scrollTop（）+$window.height（）/2）；
$sidebar.向下滑动（500）；
}否则{
$sidebar.css（'position'，'auto'）；
$sidebar.css（'top'，'auto'）；
}
});
});













测试

尝试

screen.height

获取实际高度

您需要

window.innerHeight

来获取真实尺寸（对于现代浏览器）。请看一个小包装函数。

如果我的想法正确，我想看看这是不是真的

如果这不是你想要的，请你再澄清一下好吗

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

如本文所述：

来自jquery文档，

$（window.height（）应返回浏览器视口的高度
我代表了基于html和js的演示。现在看起来像是您的站点：）
查看：hmm似乎没有，请查看此网站并查看。我指的是页面列中的3个小广告，当它向下滚动时，它将位于页面的中间。无论我将参数更改为outerheight、innerheight或screen.height，它仍然在计算我的桌子的高度。我在红色框上滚动，移动桌子的1/2高度，而不是屏幕中间。我应该改一下HTML吗？不错，我想这就是他想要实现的@我记得很近，但不完全是。。。你能查一下这个网站吗？中间栏中的广告首先会堆叠在一起，只有当滚动时，它才会停留在页面的中间。顺便说一句，我复制了你的脚本并进行了测试，发现它只在IE上工作，在chrome上不工作…这很奇怪，我在使用chrome，我用chrome编写了演示。。。我将访问该网站并尝试一下。谢谢亲爱的。但仍然只在IE上工作，chrome不工作。。。我应该为这段代码调用什么脚本？这个可以吗？
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);