1

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

我累了$window.height()/2or $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>
4

5 回答 5

1

尝试screen.height获得实际高度。参考

于 2013-08-20T07:46:41.730 回答
1

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

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

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

于 2013-08-20T08:01:25.217 回答
0 
$(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 演示

于 2013-08-20T07:52:47.853 回答
0

您需要window.innerHeight获得真实的尺寸（对于现代浏览器）。看看JavaScript - Get Browser Height以获取一个小的包装函数。

于 2013-08-20T07:47:10.197 回答
0

如果我的想法是正确的，我认为这就是您正在寻找的内容， 只需查看此示例，看看是否是这样

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

于 2013-08-20T07:48:46.780 回答