Uzyskaj pozycję elementu względem górnej części rzutni.

Question

Potrzebuję uzyskać górną pozycję elementu względem górnej części rzutni, a nie cały dokument.

Próbowałem offset().top;, który zwraca pozycję górną względem dokumentu, i próbowałem scrollTop(), który zawsze zwraca 0, niezależnie od tego, czy element jest rzeczywiście widoczny w okienku ekranu, czy nie.

Answer 1

Można go obliczyć korzystając

$('#element').offset().top - $(window).scrollTop() 

Praca Przykład

function get(){ 
 
    $('#output').html($('#element').offset().top - $(window).scrollTop()); 
 
} 
 

 
get(); 
 
$(window).scroll(get);

#element { 
 
    width:100px; 
 
    height:100px; 
 
    background:red; 
 
} 
 

 
#output { 
 
    position:fixed; 
 
    background:#000; 
 
    color:#fff; 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="output"></div> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 
<div id="element"></div> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Answer 2

function get(){ 
 
    $('#output').html($('#element').offset().top - $(window).scrollTop()); 
 
} 
 

 
get(); 
 
$(window).scroll(get);

#element { 
 
    width:100px; 
 
    height:100px; 
 
    background:red; 
 
} 
 

 
#output { 
 
    position:fixed; 
 
    background:#000; 
 
    color:#fff; 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="output"></div> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 
<div id="element"></div> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 
<div id="element"></div>