실제 화면 거리 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

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

W3 스쿨을 참조하는 것은 좋은 조언되지 않습니다 : 그것은 지금 당신의 위치 :

그것을 볼 것 같습니다. –

실제 크기 (최신 브라우저의 경우)를 얻으려면 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

흠, 안 친절 하 게이 사이트를 확인 하 고 참조하십시오. 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

: JQuery와 문서에서 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

필자는 outerheight 또는 innerheight 또는 screen.height로 매개 변수를 변경하더라도 테이블의 높이를 계산하고 있습니다. 빨간색 상자 위로 스크롤하면 화면 가운데 대신 내 표의 1/2 높이만큼 움직입니다. 대신 HTML을 약간 변경해야합니까? –

아마 Chrome의 문제 일뿐입니다. 아직 테스트 중이므로 고맙습니다. –

실제 화면 거리 jQuery를 계산하는 방법은 무엇입니까?

답변

관련 문제