JavaScript를 사용하여 'div' 상단에서 창 상단까지의 거리 결정

JavaScript를 사용하여 '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로만 수행할 수 있습니다.

제가 쓰고 싶었던 답변이 질문에 대한 댓글로 스라소니로 답변이 된 것 같습니다.

하지만 저도 저처럼 가끔 댓글을 읽는 것을 잊어버리기 때문에 답변을 작성하려고 합니다.

따라서 화면 창의 맨 위에서 요소의 거리(픽셀)만 가져오려면 다음 작업을 수행해야 합니다.

// 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');
    }
});

언급URL : https://stackoverflow.com/questions/9880472/determine-distance-from-the-top-of-a-div-to-top-of-the-window-with-javascript