2012-03-26 33 views
92

Come determinare la distanza tra la parte superiore di un div e la parte superiore della schermata corrente? Voglio solo la distanza dei pixel nella parte superiore dello schermo corrente, non nella parte superiore del documento. Ho provato un po 'di cose come .offset() e .offsetHeight, ma non riesco a spiegarmi bene. Grazie!Determina la distanza dalla parte superiore di un div alla parte superiore della finestra con javascript

+2

si potrebbe desiderare di [check this out] (http://www.quirksmode.org/js/findpos.html) – Joseph

+4

'el.getBoundingClientRect(). Top + window.scrollY' – caub

+1

@caub Eh, è solo 'el.getBoundingClientRect(). top'. Aggiungendo la posizione di scorrimento si aggiunge alla distanza dalla parte superiore del documento. https://developer.mozilla.org/de/docs/Web/API/Element/getBoundingClientRect – lynx

risposta

194

È possibile utilizzare .offset() per ottenere l'offset rispetto all'elemento document e quindi utilizzare la proprietà scrollTop dell'elemento window per trovare quanto in basso nella pagina che l'utente ha fatto scorrere:

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

La variabile distance ora detiene la distanza dalla parte superiore dell'elemento #my-element e la piegatura in alto.

Ecco una demo: http://jsfiddle.net/Rxs2m/

noti che i valori negativi significano che l'elemento è sopra il top-fold.

4

ho usato questo:

       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 

codice:

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

Vanilla:

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

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

    console.log(distanceToTop); 
}); 

Aprire la console del browser e scorrere la pagina per visualizzare la distanza.

+0

Questa è un'ottima risposta. Saluti!! – CodeWarrior

Problemi correlati