กำหนดระยะห่างจากด้านบนสุดของ div ถึงด้านบนของหน้าต่างด้วย javascript

ฉันจะกำหนดระยะห่างระหว่างด้านบนสุดของ 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 ล้วนๆ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');
}
});