Ottieni la posizione dell'elemento rispetto all'inizio della finestra

Question

Ho bisogno di ottenere la prima posizione di un elemento rispetto alla parte superiore della finestra, non dell'intero documento.

Ho provato offset().top; corrispondente alla posizione superiore rispetto al documento, e ho provato scrollTop() che restituisce sempre 0, indipendentemente se l'elemento è in realtà visibili nella finestra oppure no.

Answer 1

È possibile calcolare utilizzando

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

Lavorare esempio

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>