Ich habe einen scrollbaren div -Container, der mehrere "pages" (oder div ) in den Container passt.
Mein Ziel ist es, zu jedem Zeitpunkt herauszufinden, wo in meinem roten Container der obere Teil meines scrollbaren Containers erreicht ist. Es kann also eine Konstante beim Scroll-Ereignis sein oder eine Schaltfläche, die diese Aufgabe auslöst.
Also zum Beispiel. Wenn ich ein absolutes div-Element in einem meiner roten Kästchen bei top:50px habe. Und wenn ich scrolle, wo das div-Element den oberen Rand meines scrollbaren Containers erreicht. Der Auslöser sollte sagen, dass ich bei 50px meines roten Containers bin.
Es fällt mir schwer zu begreifen, wie ich das erreichen kann, aber ich habe Dinge ausprobiert wie:
%Vor%Aber es berücksichtigt nicht die einzelnen Seiten und ich glaube nicht, dass es je nach Maßstab vollkommen genau ist. Jede Anleitung oder Hilfe würde sehr geschätzt werden.
Hinweis: Bei Bedarf verwende ich scrollspy in meinem Projekt, damit ich festlegen kann, welcher rote Container geprüft werden muss.
HTML
%Vor%CSS
%Vor%JS
%Vor%Ich glaube nicht, dass ich einen guten Job bei der Weiterleitung von dem, was ich erreichen will, übertrage.
Momentan gibt es zwei .formContainer s. Wenn ich in #pageContainer scrollen, werden die .formContainer divs durch #pageContainer nach oben verschoben.
Was ich also erreichen möchte, ist, wenn ein Nutzer auf den "ME" -Button oder #click klickt (wie in der Geige unten gezeigt), würde ich gerne wissen, wo in diesem speziellen .formContainer er sich berührt Der Anfang von #pageContainer .
Ich benutze Scroll-Spion in meiner realen Anwendung, damit ich weiß, welches .formContainer am oberen Ende ist. Wenn Sie also nur ein .formContainer anvisieren möchten, ist das in Ordnung.
Ich habe diese weißen div-Elemente als Beispiel verwendet. Wenn ich #pageContainer scrolle, und dieses weiße div-Element oben auf dem Bildschirm ist, während ich scrolle und ich auf "ME" klicke, sollte der Klick-Auslöser darauf aufmerksam machen, dass .formContainer den oberen Rand von% co_de berührt % bei 50px von oben. Wenn der rote Container nur den oberen Rand von #pageContainer berührt, sollte er sagen, dass er 0 Pixel von oben entfernt ist.
Ich hoffe, dass das hilft, einige Missverständnisse auszuräumen.
Hier ist eine aktualisierte jsfiddle , die die Art der Aktion zeigt, die ich machen möchte.
Ich gebe das einen Stich, weil ich diese Dinge interessant finde. Es könnte nur ein Anfang sein, da ich heute Kopfschmerzen habe und nicht gerade nachdenke. Ich würde wetten, dass es etwas aufgeräumt und vereinfacht werden kann.
Ich könnte auch den Ansatz, den ich gemacht habe, zu kompliziert machen, die erste sichtbare Form und die Positionierung bekommen. Ich habe auch die Funktion getBoundingClientRect nicht verwendet.
Stattdessen habe ich mich dem Problem genähert und versucht, Padding und Rand zu berücksichtigen, indem ich eine Schleife durch Elternobjekte bis zum pageContent verwende, um den Versatz relativ zu diesem Element zu erhalten. Da das Formular im pageContent-Element mehrere Ebenen tief verschachtelt ist, können Sie position () nicht verwenden. Sie können auch nicht offset () verwenden, da sich das mit scroll ändert. Der Loop-Ansatz erlaubte mir, den oberen Rand / Padding zu berücksichtigen. Ich habe die anderen vorgeschlagenen Lösungen nicht vollständig betrachtet, so dass es möglicherweise einen kürzeren Weg gibt, dies zu erreichen.
Wenn Sie berücksichtigen, dass die Skalierung die tatsächliche Position der untergeordneten Elemente beeinflusst, müssen Sie bei der Ermittlung des tatsächlichen Standorts nach Ihrem Skalierungsprozentsatz dividieren. Um das zu tun, habe ich den scalePercentage in eine globale Variable verschoben, so dass er von der Zoom-Funktion und dem Klick verwendet werden konnte.
Hier ist der Kern dessen, was ich getan habe. Die tatsächliche Geige hat mehr Protokollierung und Müll:
%Vor%Aktualisierte Fiddle ( vergessen, die Skalierung in get func zu berücksichtigen): Ссылка
> Wenn ich Ihre Frage richtig verstehe, wollen Sie fangen, wenn bestimmte Nachkommenelemente den Anfang des äußeren Containers erreichen, und dann die relative Position der sichtbaren "Seite" ( div mit Klasse formContainer ) bestimmen nach oben.
Wenn ja, besteht die erste Aufgabe darin, die spezifischen Elemente zu markieren, die dies auslösen könnten:
%Vor%Dann der Code:
%Vor% BEARBEITEN: Geänderter Code zum Überprüfen von formContainer -Elementen anstatt von untergeordneten Elementen gemäß Ihrem Kommentar.
BEARBEITEN # 2: Ein einfacherer Ansatz, da Sie wissen, welches formContainer auf das Ziel zutrifft:
Es gibt jedoch immer noch andere Ergebnisse basierend auf der Größe des Fensters. Dies scheint unvermeidlich - die Funktionen zoomProject und resize passen die Größe des Inhalts explizit an, sodass Sie die umgekehrten Transformationen auf die Zahl anwenden müssen, die Sie aus diesem Code erhalten, wenn Sie sie im ursprünglichen Koordinatensystem haben möchten.
Ich verstehe nicht ganz, was Sie brauchen, aber wenn ich richtig bin, sollte das den Trick machen
%Vor%ScrollHeight ist die gesamte Höhe des Objekts einschließlich scrollbarer Pixel. ScrollTop ist die Anzahl der Pixel, die von oben scrollen.
Tags und Links javascript html jquery css