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
risposta
È 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.
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);
});
*/
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.
Questa è un'ottima risposta. Saluti!! – CodeWarrior
- 1. Posizione di Div in relazione alla parte superiore del Viewport
- 2. Allinea div con la parte superiore di un contenitore
- 3. Scorrere verso la parte superiore della pagina
- 4. Finestra del proprietario WPF nella parte superiore della finestra secondaria
- 5. div sulla parte superiore del div con Google Maps API
- 6. UIWebBroswerView ha gap dalla parte superiore della UIWebView
- 7. Aggiungi div sulla parte superiore dell'immagine centrata?
- 8. Come posizionare un div nella parte superiore di un altro div con javascript?
- 9. aggiungendo qualcosa alla parte superiore di un oggetto JSON
- 10. filatore discesa iniziare dalla parte superiore della filatrice
- 11. JavaScript nella parte inferiore/superiore della pagina Web?
- 12. Mantieni pulsanti html nella parte superiore di un div
- 13. Outlook 2013 Tagliare la parte superiore dell'immagine?
- 14. css: testo allineato alla parte superiore e inferiore delle cellule
- 15. PIL interrompe la parte superiore delle lettere
- 16. Mostra div dopo lo scorrimento di 100 px dalla parte superiore della pagina
- 17. meno 20 pixel nella parte superiore e inferiore del div
- 18. Come rimuovo solo la parte superiore di un box-shadow?
- 19. Allinea le celle alla parte inferiore e superiore di UITableView, lasciando una distanza elastica nel mezzo
- 20. Visualizzazione sovrapposizione nella parte superiore della visualizzazione elenco?
- 21. Cliccando su un popover si scorre indietro fino alla parte superiore della pagina [Bootstrap and Django]
- 22. visualizzazione di visualizzazione nella parte superiore della barra delle azioni
- 23. JQuery Scorrere fino a Offset dalla parte superiore del browser?
- 24. Come stampare con l'asse x nella parte superiore della figura?
- 25. Angular2 Come scorrere fino alla parte superiore della finestra sull'interazione dell'utente
- 26. Reactjs ridimensiona dai lati o dalla parte superiore della scatola? Forse con jquery ui?
- 27. Come aggiungere una vista sulla parte superiore della tastiera?
- 28. : la parte superiore non funziona in Firefox e Opera
- 29. menu a discesa con la parte superiore del triangolo
- 30. Intestazione altezza e intestazione di posizionamento dalla parte superiore della pagina in wkhtmltopdf
si potrebbe desiderare di [check this out] (http://www.quirksmode.org/js/findpos.html) – Joseph
'el.getBoundingClientRect(). Top + window.scrollY' – caub
@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