Xác định khoảng cách từ đỉnh div đến đỉnh cửa sổ bằng javascript

Làm cách nào để xác định khoảng cách giữa đỉnh div đến đỉnh màn hình hiện tại? Tôi chỉ muốn khoảng cách pixel đến trên cùng của màn hình hiện tại, không phải trên cùng của tài liệu. Tôi đã thử một vài thứ như .offset()và .offsetHeight, nhưng tôi không thể bọc bộ não của mình xung quanh nó. Cảm ơn!

Bạn có thể sử dụng .offset()để lấy phần bù so với documentphần tử và sau đó sử dụng thuộc scrollToptính của windowphần tử để tìm xem trang người dùng đã cuộn xuống bao xa:

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

Các distancebiến bây giờ giữ khoảng cách từ phía trên cùng của #my-elementphần tử và các hàng đầu lần.

Đây là bản demo: http://jsfiddle.net/Rxs2m/

Lưu ý rằng các giá trị âm có nghĩa là phần tử nằm trên nếp gấp trên cùng.

Vanilla:

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

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

   console.log(distanceToTop);
});

Mở bảng điều khiển trình duyệt của bạn và cuộn trang của bạn để xem khoảng cách.

Điều này có thể đạt được hoàn toàn với JavaScript .

Tôi thấy câu trả lời tôi muốn viết đã được lynx trả lời trong các bình luận cho câu hỏi.

Nhưng dù sao tôi cũng sẽ viết câu trả lời vì giống như tôi, mọi người đôi khi quên đọc các bình luận.

Vì vậy, nếu bạn chỉ muốn lấy khoảng cách của một phần tử (tính bằng Pixels) từ đầu cửa sổ màn hình của mình, đây là những gì bạn cần làm:

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

sử dụng getBoundingClientRect ()

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

Đó là nó!

Hy vọng điều này sẽ giúp được ai đó :)

Tôi đã sử dụng điều này:

                              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

mã:

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

Tôi đã sử dụng chức năng này để phát hiện nếu phần tử hiển thị trong cổng xem

Mã số:

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