요소의 화면에서 퍼센트를 감지합니다.

현재 윈도우에서 볼 수있는 요소의 %를 감지하려고합니다. 사용자가 절반 요소를 볼 수있는 경우 사용자가 전체 요소를 볼 수 있다면요소의 화면에서 퍼센트를 감지합니다.

예를 들어, 여기 내 코드는 지금까지의 100

을 반환, (50)을 반환 :

function getPercentOnScreen() { 
    var $window = $(window), 
     viewport_top = $window.scrollTop(), 
     viewport_height = $window.height(), 
     viewport_bottom = viewport_top + viewport_height, 
     $elem = $(this), 
     top = $elem.offset().top, 
     height = $elem.height(), 
     bottom = top + height; 

    return (bottom - viewport_top)/height * 100; 
}

그러나 그것은 작동하지 않는 것 같습니다. 누구나 이걸 성취하는데 나를 도울 수 있습니까? 나는 기어를 돌리는 것처럼 보입니다.

출처

2014-05-12 nicholasodonnell

원본 크기는 픽셀 단위로 어디입니까? 먼저 크기를 나타 내기 위해 너비와 높이 변수를 설정 한 다음 아래 답변 중 하나를 시도하고 수학을 수행하십시오. 예를 들어 요소 크기가 200x200 픽셀이고 새 크기가 150x75 픽셀이면 대답은 (150 + 75)/(200 + 200) * 100 = 56.25 %입니다. – Tasos

귀하의 $elem = $(this) 할당이 잘못된 것, 여기에 기능 범위 지정은 this 당신이 대신 $elem = $('#yourElementId')에 의해 참조하십시오 (기능 getPercentOnScreen ~ ALA)에있는 함수를 참조 의미한다.

출처

2014-05-12 16:48:52 unboundev

이것은 함수가 호출되는 방식에 따라 다릅니다. 이것을 이벤트 핸들러로 사용하면 'this'가 요소가됩니다. –

@JamesMontagne 그 구별을 잘 잡는다면, s'pose는 jquery s.t를 확장하면 동일하게 유지됩니다. 그것은'$ (element) .getPercentOnScreen()'을 사용하여 호출됩니다. – unboundev

-1

만 다음 요소의 퍼센트를 계산하려면 바로 수행이

당신이 얻고 싶은 것은 요소가 뷰포트의 상단과 하단을지나 확장 픽셀의 양입니다

function getPercentOnScreen(elem) { 
    $docHeight = $(document).height(); 
    $elemHeight = $(elem).height(); 

    return ($elemHeight/$docHeight)* 100; 
}

출처

2014-05-12 16:50:08

. 그럼 전체 높이에서 그것을 빼고 그 높이로 나누면 화면 상에 퍼센트를 얻을 수 있습니다.

var px_below = Math.max(bottom - viewport_bottom, 0); 
var px_above = Math.max(viewport_top - top, 0); 
var percent = (height - px_below - px_above)/height; 
return percent;

jQuery의 높이 방법에는 패딩이 포함되지 않습니다. 아마도 .outerHeight을 사용하고 싶을 것입니다.

출처

2014-05-12 16:51:42 Kyle

요소의 화면에서 퍼센트를 감지합니다.

답변

관련 문제