Как рассчитать фактическое расстояние экрана jQuery?

Я хочу разместить объявление в столбце страницы. Когда я прокручиваю вниз, я хочу, чтобы объявление прошло полностью, но положение в вертикальной середине страницы. Использование сценария прямо сейчас может устанавливать только определенное расстояние, но не может установить точное расстояние 50%.Как рассчитать фактическое расстояние экрана jQuery?

У меня есть усталость $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>

источник

2013-08-20 Iam Ran

С Jquery документа, $(window).height(); должен вернуть высоту браузера просмотра.

Я представляю демо на основе ваших html и js. Похоже, ваш сайт сейчас :)

увидеть его: http://jsfiddle.net/FrFsP/1/

источник

2013-08-20 08:01:25 Bigxiang

Ницца я думаю, что это то, чего он хочет достичь .. @IamRan –

Хммм это близко, но не совсем ... Вы можете проверить этот сайт? http://live1.7m.cn/ Объявление в среднем столбце будет складываться на месте сначала, только при прокрутке, оно останется посередине страницы. Btw, я скопировал ваши скрипты и протестировал их и нашел, что он работает только с IE, но не с хром ... –

Странно, я использую хром, я написал демо с использованием хром ... Я заберу сайт и попытаюсь. – Bigxiang

Попробуйте screen.height, чтобы получить фактическую высоту. Reference

источник

2013-08-20 07:46:41 Amit

Ссылаясь на W3Schools не хороший совет. –

Вам нужны window.innerHeight, чтобы получить реальные размеры (для современных браузеров). Посмотрите на JavaScript - Get Browser Height для небольшой функции обертки.

источник

2013-08-20 07:47:10 ranieuwe

Если бы я получил идею права, я думаю this is what you are looking for просто проверить this example, чтобы увидеть, если это он

Если это не то, что вы ищете, пожалуйста, вы можете уточнить немного больше?

источник

2013-08-20 07:48:46

hmm похоже нет, прошу просим проверить этот сайт и посмотрите. http://live1.7m.cn/pk_live_ft.aspx?view=odds&match=&line=no –

Я имею в виду 3 маленьких объявления внутри столбца страницы, когда он прокручивает вниз, он будет расположен в середине страницы. –

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

источник

2013-08-20 07:52:47

Независимо от того, что я меняю параметры на внешний или внутренний, или на screen.height, он все равно вычисляет высоту таблицы. Я прокручиваю красную рамку, перемещая высоту 1/2 стола, а не середину экрана. Должен ли я сделать некоторые изменения в HTML вместо этого? –

Возможно, это проблема Chrome, я все еще тестирую, спасибо. –

Как рассчитать фактическое расстояние экрана jQuery?

ответ

Смежные вопросы