자바 스크립트를 사용하여 div의 상단에서 창 상단까지의 거리를 결정하십시오.

div의 맨 위와 현재 화면의 맨 위 사이의 거리를 어떻게 결정합니까? 문서의 상단이 아닌 현재 화면의 상단까지의 픽셀 거리를 원합니다. 내가 좋아하는 몇 가지 시도했습니다 .offset()과를 .offsetHeight,하지만 난 그냥 주위에 내 머리를 래핑 수 없습니다. 감사!

당신은 사용할 수 있습니다 .offset()얻을하여 비교 오프셋 document요소 다음 사용 scrollTop의 특성 window은 사용자가 스크롤 한 페이지 아래로 찾는 요소를 :

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

distance변수는 이제 상단으로부터의 거리가 유지 #my-element소자와 상부 배.

데모는 다음과 같습니다. http://jsfiddle.net/Rxs2m/

음수 값은 요소가 상단 폴더 위에 있음을 의미합니다.

바닐라:

window.addEventListener('scroll', function(ev) {

   var someDiv = document.getElementById('someDiv');
   var distanceToTop = someDiv.getBoundingClientRect().top;

   console.log(distanceToTop);
});

브라우저 콘솔을 열고 거리를 보려면 페이지를 스크롤하십시오.

이것은 순수하게 JavaScript 로 달성 할 수 있습니다 .

lynx 가 질문에 대한 답변을 작성하고 싶었습니다 .

그러나 어쨌든 사람들은 때때로 댓글을 읽는 것을 잊어 버리기 때문에 답을 쓸 것입니다.

따라서 화면 창의 상단에서 요소의 거리 (픽셀 단위)를 얻으려면 다음을 수행하십시오.

// Fetch the element
var el = document.getElementById("someElement");  

사용 getBoundingClientRect ()

// Use the 'top' property of 'getBoundingClientRect()' to get the distance from top
var distanceFromTop = el.getBoundingClientRect().top; 

그게 다야!

희망이 누군가에게 도움이되기를 바랍니다 :)

나는 이것을 사용했다 :

                              myElement = document.getElemenById("xyz");
Get_Offset_From_Start       ( myElement );  // returns positions from website's start position
Get_Offset_From_CurrentView ( myElement );  // returns positions from current scrolled view's TOP and LEFT

암호:

function Get_Offset_From_Start (object, offset) { 
    offset = offset || {x : 0, y : 0};
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    if(object.offsetParent) {
        offset = Get_Offset_From_Start (object.offsetParent, offset);
    }
    return offset;
}

function Get_Offset_From_CurrentView (myElement) {
    if (!myElement) return;
    var offset = Get_Offset_From_Start (myElement);
    var scrolled = GetScrolled (myElement.parentNode);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
//helper
function GetScrolled (object, scrolled) {
    scrolled = scrolled || {x : 0, y : 0};
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html" && object.parentNode) { scrolled=GetScrolled (object.parentNode, scrolled); }
    return scrolled;
}

    /*
    // live monitoring
    window.addEventListener('scroll', function (evt) {
        var Positionsss =  Get_Offset_From_CurrentView(myElement);  
        console.log(Positionsss);
    });
    */

이 기능을 사용하여 요소가 뷰 포트에 보이는지 감지했습니다.

암호:

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
$(window).scroll(function(){
var scrollTop     = $(window).scrollTop(),
elementOffset = $('.for-scroll').offset().top,
distance      = (elementOffset - scrollTop);
if(distance < vh){
    console.log('in view');
}
else{
    console.log('not in view');
}
});