Wie Sie das nächste Element auf die aktuelle Position mit jQuery finden

Ich habe ein Dokument mit mehreren Abschnitten wie folgt aus:Wie Sie das nächste Element auf die aktuelle Position mit jQuery finden

<div class='section' id='sec1'> 
    lalala 
    lalala 
    lalala 
</div> 

<div class='section' id='sec2'> 
    lalala 
    lalala 
    lalala 
</div> 

<div class='section' id='sec3'> 
    lalala 
    lalala 
    lalala 
</div> 

<div class='section' id='sec4'> 
    lalala 
    lalala 
    lalala 
</div>

Wie ich das am nächsten <div.section> der aktuellen Scroll-Position greifen sie (vermutlich, dies entspräche zu dem Abschnitt, den der Leser gerade betrachtet)?

Quelle

2012-05-25 Scribblemacher

Neben Hover verwenden Sie die Bildlaufposition zu nehmen und die Höhe jedes ‚.section‘ davon subtrahieren, bis es 0 oder weniger ist. Das wird immer schwieriger, je mehr du diese Divs einwickelst. – bygrace

Es gibt eine faire Menge um diese divs gewickelt, und viel drinnen (es ist die HTML-Ausgabe von docbook) – Scribblemacher

gizmovation gibt einen besseren Ansatz unter anyways – bygrace

Sie können $(window).scrollTop() und $(el).postion().top verwenden, um herauszufinden, wie weit das Element vom oberen Rand des Bildschirms nach dem Scrollen ist.

Sie können diese Informationen dann verwenden, um das Element wie gewünscht zu bearbeiten.

Hier ist ein funktionierendes jsfiddle Beispiel: http://jsfiddle.net/gizmovation/x8FDU/

Quelle

2012-05-25 20:01:31 christurnerio

Hallo Leute, Ich fragte mich, ob dies auch mit klarem JavaScript erreicht werden könnte? – AppRoyale

-5

Immer wenn Sie ein Element schweben, sagt Ihnen das mousemove Ereignis, über welches Element Sie schweben.

$(document).bind('mousemove', function(e) { 
    e.target 
    /* 
     the target in click/hover events 
     is the element that the event was 
     triggered on. 
    */ 
});

Ein Nachteil könnte die Tatsache sein e.target werden Sie das Element geben mit dem höchsten z-index - die eine in der obersten Schicht - also, wenn Sie ein Overlay über Ihrem Text haben wird es Ihnen die Overlay geben nicht der Text div.

Quelle

2012-05-25 19:55:11

Bitte fügen Sie weitere Erläuterungen zu Ihrer Antwort und erklären, warum es funktioniert. – Johannes

@johannes - die Erklärung im Kommentar ist ziemlich klar IMO. Wenn Sie ein Element über den Mauszeiger halten, sagt Ihnen das 'mousemove'-Ereignis, über welches Element Sie gerade schweben. –

Wie Sie das nächste Element auf die aktuelle Position mit jQuery finden

Antwort

Verwandte Themen