Share
Alle zwei Wochen werfen wir einen sehr fokussierten Blick auf einen interessanten und nützlichen Effekt, Plug-In, Hack, Bibliothek oder sogar eine clevere Technologie. Wir werden dann versuchen, entweder den Code zu dekonstruieren oder ein kleines Projekt damit zu erstellen.
Heute schauen wir uns ein Plugin an, das einen ziemlich netten Effekt implementiert - es ist ziemlich schwierig, es in einem Satz zu erklären. Sie können auch auf die Schaltfläche "Weiter" klicken, um nach dem Sprung zu beginnen.
Als Webentwickler haben wir Zugriff auf eine erstaunliche Menge vorgefertigten Codes, sei es ein kleiner Ausschnitt oder ein vollwertiges Framework. Wenn Sie nicht etwas unglaublich Spezielles tun, besteht die Chance, dass Sie bereits etwas vorgefertigtes Element für Sie nutzen können. Leider sind viele dieser herausragenden Angebote anonym, besonders für Nicht-Hardcore-Fans.
Diese Serie versucht dieses Problem zu beheben, indem ein wirklich gut geschriebener, nützlicher Code eingeführt wird - sei es ein Plugin, ein Effekt oder eine Technologie für den Leser. Wenn er klein genug ist, werden wir versuchen, den Code zu dekonstruieren und zu verstehen, wie er Voodoo macht. Wenn es viel größer ist, versuchen wir, ein Mini-Projekt damit zu erstellen, um die Seile zu lernen und hoffentlich zu verstehen, wie man es in der realen Welt nutzt.
Hier eine kurze Info:
In vielen Fällen muss der Inhalt beim Scrollen verschoben werden, aber nur innerhalb seiner Eltern.
Das Verschieben von Inhalten, während ein Benutzer durch den Rest der Seite blättert, ist ein Kinderspiel. Es ist kein JavaScript erforderlich - Sie können dies einfach mit altem CSS tun. Schlag a Position: feststehend Deklaration drauf und Boom! Sie haben einen Container, der an einer bestimmten Stelle auf der Seite fixiert ist - er schwebt auf der Seite, um mehr umgangssprachlich zu sein.
Aber seien wir ehrlich, es funktioniert nicht bei jedem Layout. Sie könnten ein wenig vorausplanen und es auf der Seite positionieren, so dass wichtige Elemente nie beeinträchtigt werden, aber es wäre weder völlig narrensicher noch anderweitig ohne umfangreiche Änderungen wiederverwendbar.
In diesen Fällen muss der Inhalt beim Scrollen verschoben werden, aber nur innerhalb seiner Eltern.. Wenn Sie sich fragen, ja, diese Funktionalität ist eine Variation derjenigen, die Andrew Ihnen im Tutorial der letzten Woche gezeigt hat. So habe ich dieses Plugin kennengelernt.
Wie Sie in der Webentwicklung finden werden, ähnlich wie bei multivariablem Kalkül, gibt es oft eine Reihe von Lösungen für jedes gegebene Problem. Sehen wir uns eine dieser alternativen Lösungen an.
Die allgemeine Logik oder der Arbeitsablauf des Plug ist eigentlich ziemlich einfach. Lass mich dir zeigen. Denken Sie daran, dass ich mich auf das Element beziehen möchte, das als Float verwendet werden muss klebrig von jetzt an.
Aber bevor wir anfangen, hier ein kurzes Modell, um die Hierarchie zu zeigen:
Die gesamte Logik des Plugins kann verwässert werden auf:
Wenn du verwirrt bist, sei nicht so. Betrachten wir zum Beispiel einige Beispielnummern:
Anhand dieser obigen Informationen können Sie das ableiten
In Szenario eins - das klebrige sollte angemessen wieder aufgezogen werden. Warum? Die Seite wurde 10px von oben nach oben gescrollt - 10 stammt von der Seite selbst, während der Rest vom übergeordneten Element des Sticky stammt. Somit ist das übergeordnete Element im Hauptansichtsfenster sichtbar.
In Szenario zwei - das klebrige kann alleine gelassen werden. Von den 150 Pixeln stammen 10 von der Seite, 100 vom übergeordneten Element und der Rest wird vom Rest des Elements der Seite übernommen. Dies bedeutet, dass der Benutzer an dem übergeordneten Element vorbeigescrollt hat und wir nichts tun müssen.
Wenn Sie an diesem Punkt noch unscharf sind, machen Sie sich keine Sorgen. Ich werde ein bisschen mehr erklären, während ich durch die Quelle gehe.
Die Quelle ohne Kommentare ist nur ein kleiner Teil von mehr als 30 Zeilen. Wie immer gehen wir den Code durch und erklären, was jede Zeile macht.
Hier ist die Quelle als Referenz.
Accentsconagua
$ .fn.stickyfloat = Funktion (Optionen, lockBottom) var $ obj = this; var parentPaddingTop = parseInt ($ obj.parent (). css ('padding-top')); var startOffset = $ obj.parent (). offset (). top; var opts = $ .extend (startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom: true, Optionen); $ obj.css (position: 'absolute'); if (opts.lockBottom) var bottomPos = $ obj.parent (). height () - $ obj.height () + parentPaddingTop; if (bottomPos < 0 ) bottomPos = 0; $(window).scroll(function () $obj.stop(); var pastStartOffset = $(document).scrollTop() > opts.startOffset; var objFartherThanTopPos = $ obj.offset (). top> startOffset; var objBiggerThanWindow = $ obj.outerHeight () < $(window).height(); if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ) var newpos = ($(document).scrollTop() -startOffset + opts.offsetY ); if ( newpos > bottomPos) newpos = bottomPos; if ($ (Dokument) .scrollTop () < opts.startOffset ) newpos = parentPaddingTop; $obj.animate( top: newpos , opts.duration ); ); ; Zeit zu sehen, was es tatsächlich macht. Ich gehe davon aus, dass Sie ein ziemlich einfaches Verständnis von JavaScript haben.
$ .fn.stickyfloat = Funktion (Optionen, lockBottom) ;
Schritt 1 - Der generische Wrapper für ein jQuery-Plugin. Wie du wahrscheinlich weißt, Optionen ist ein Objekt, das verschiedene Optionen enthält, um das Verhalten des Plugins zu konfigurieren. lockBottom, Interessanterweise gibt an, ob die gewünschte Funktionalität aktiviert ist oder nicht. Wir lassen es an.
var $ obj = dies;
Schritt 2 - Behalten Sie einen Verweis auf das übergebene Element. In diesem Kontext, diese zeigt auf das DOM-Element, das mit dem von Ihnen übergebenen Selektor übereinstimmt. Wenn Sie beispielsweise übergeben haben #Speisekarte, diese zeigt auf das Element mit dieser ID.
var parentPaddingTop = parseInt ($ obj.parent (). css ('padding-top')); Schritt 3 - Dies ist nur zum Glätten des Effekts, wenn das übergeordnete Element eine große Auffüllung hat. Wenn ja, wird die Auffüllung in die Berechnung einbezogen.
var startOffset = $ obj.parent (). offset (). top;
Schritt 4 - Wir berechnen die Position des übergeordneten Elements relativ zum Dokument mithilfe von Versatz jQuery-Methode. Wir arbeiten mit dem DOM durch Elternteil Methode. Wir $ obj da haben wir das klebrige bereits zwischengespeichert. Schlagen Sie in der jQuery-API-Dokumentation nach, wenn Sie mit diesen Methoden nicht vertraut sind.
In diesem Fall reicht die Entfernung von oben aus, sodass wir diesen Wert allein ermitteln können.
var opts = $ .extend (startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom: true, Optionen);
Schritt 5 - Ein ziemlich generischer Teil des jQuery-Plugin-Entwicklungsprozesses. Wir führen im Wesentlichen die übergebenen Optionen zusammen mit einigen Voreinstellungen zusammen, um einen endgültigen Satz von Optionen zu erhalten, der im gesamten Code verwendet wird. Beachten Sie, dass die übergebenen Parameter immer Vorrang vor den Standardwerten haben.
$ obj.css (position: 'absolute');
Schritt 6 - Der fragliche Effekt wird durch Manipulieren der Elemente erzeugt oben CSS-Wert, also gehen wir einfach weiter und setzen seine Position auf absolut, falls es noch nicht so eingestellt wurde.
if (opts.lockBottom) var bottomPos = $ obj.parent (). height () - $ obj.height () + parentPaddingTop; if (bottomPos < 0 ) bottomPos = 0;
Schritt 7 - Wie oben erwähnt, wird der lockBottom Option gibt an, ob der betreffende Effekt funktioniert oder nicht. Wenn aktiviert, können wir mit der Berechnung beginnen. Was wir berechnen, ist der Grenzwert, ab dem wir das klebrige nicht neu positionieren müssen.
Natürlich können Sie nur die Höhe des übergeordneten Elements berechnen, der Effekt ist jedoch nicht verfeinert. Sie müssen die Höhe des Klebers selbst entlang der Auffüllungen des übergeordneten Elements berücksichtigen.
$ (window) .scroll (function () // Jede Menge Code)
Schritt 8 - Wir hängen unseren Code in einer anonymen Funktion an den Fenstern an scrollen Veranstaltung. Zugegeben, dies ist nicht der effizienteste Weg, aber wir werden es vorerst ignorieren.
$ obj.stop ();
Schritt 9 - Zuerst müssen Sie alle laufenden Animationen auf dem Sticky-Element stoppen. Das halt Die Methode kümmert sich darum.
var pastStartOffset = $ (document) .scrollTop ()> opts.startOffset; var objFartherThanTopPos = $ obj.offset (). top> startOffset; var objBiggerThanWindow = $ obj.outerHeight () < $(window).height();
Schritt 10 - Diese drei Variablen enthalten Werte, die wir später verwenden werden.
pastStartOffset prüft, ob wir die obere Begrenzung des übergeordneten Elements überschritten haben. Denken Sie daran, wir haben das verwendet Versatz Methode, um den Abstand zwischen dem übergeordneten Element und dem Dokument herauszufinden. Wie weit Sie mit dem gescrollt haben, erfahren Sie scrollTop Methode. Dies ist der Abstand zwischen dem oberen Rand des Dokuments und dem oberen Teil des aktuellen Ansichtsfensters. objFartherThanTopPos prüft, ob sich der Sticky in der Standardposition befindet - am oberen Rand des übergeordneten Elements. Wenn wir über den gescrollt haben oben von den Eltern wollen wir nicht, dass es draußen schwebt.objBiggerThanWindow prüft, ob die Gesamthöhe des Sticky größer ist als die Fenstergröße. In diesem Fall hat es keinen Sinn, das Sticky-Element zu manipulieren. if ((pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow) // Mehr Code
Schritt 11 - Hier berechnet das Plugin, ob das klebrige Element bearbeitet werden muss. Was die obige Zeile macht:
Wir gehen nur weiter wenn beide dieser Bedingungen sind erfüllt.
var newpos = ($ (document) .scrollTop () - startOffset + opts.offsetY);
Schritt 12 - Diese Zeile definiert eine Variable, Newpos, was die Position angibt, zu der das Sticky-Element animiert werden soll. Wie Sie vielleicht bemerkt haben, ist die Berechnung ziemlich einfach, wenn Sie das Bild oben beachten. Ermitteln Sie die gescrollte Entfernung, fügen Sie die obere Auffüllung des übergeordneten Elements hinzu und ziehen Sie schließlich den Abstand zwischen dem Dokument und dem übergeordneten Element ab - dem Startpunkt. Dies gibt Ihnen die Entfernung in Pixeln zwischen der Oberseite des übergeordneten Elements und dem Punkt innerhalb, an dem der Sticky positioniert werden soll.
if (newpos> bottomPos) newpos = bottomPos;
Schritt 13 - Wenn wir über die untere Grenze des übergeordneten Elements hinaus geblättert haben, müssen Sie die Dinge nicht weiter bearbeiten. Dort seine Position verriegeln.
if ($ (Dokument) .scrollTop () < opts.startOffset ) newpos = parentPaddingTop;
Schritt 14 - Wenn wir über die obere Begrenzung des übergeordneten Elements hinaus geblättert haben, lassen Sie es dort gesperrt, damit es sich nicht weiter nach oben bewegt.
$ obj.animate (top: newpos, opts.duration);
Schritt 15 - Alles erledigt! Wir animieren einfach das klebrige Element, das im erforderlichen Bereich vorbeigeht oben Wert zusammen mit der Dauer des Effekts mit animieren jQuery-Methode.
Wie Sie wahrscheinlich an dieser Stelle bereits abgeleitet haben, ist der Gebrauch so:
$ ('# menu'). stickyfloat (duration: 500);> Anstatt das Beispiel-Mini-Projekt wie beim letzten Mal zu erklären, habe ich mich entschieden, es lediglich zu bauen und Ihnen den Code zu geben.
Hier sind die relevanten Teile der Demo, der Rest ist Boilerplate:
Klebriges MenüIch wollte hier etwas unglaublich Witziges schreiben. Ich bin durchgefallen. :(Ja, ich werde dir überall folgen, solange du in meinen Eltern bistSie haben hier etwas Kluges erwartet, nicht wahr? Ich weiß du hast es getan! Gestehe!
.Abschnitt Polsterung: 10px; Breite: 900px; Marge: 0 auto; Hintergrundfarbe: # f1f1f1; Position: relativ; .sektion .content height: 800px; Hintergrundfarbe: #ddd; Rand links: 250px; Text ausrichten: Mitte; Farbe: # 333; Schriftgröße: 16px; .sektion .menu position: absolut; links: 10px; Breite: 240px; Höhe: 100px; Hintergrund: # 06C; Text ausrichten: Mitte; Farbe: #fff; Schriftgröße: 14px;
$ ('# menu'). stickyfloat (duration: 400); $ ('# menu2'). stickyfloat (duration: 400); Wenn Sie die Dateien durchgehen, während Sie diesen Artikel lesen, sollte dies ziemlich selbsterklärend sein, aber Sie können mich gerne mit Fragen ansprechen, wenn ein Teil unklar ist.
Und wir sind fertig. Wir haben uns ein unglaublich nützliches Plugin angesehen, den Quellcode durchgegangen und schließlich ein Mini-Projekt damit erstellt.
Fragen? Schöne Dinge zu sagen? Kritikpunkte Schlagen Sie den Kommentarbereich an und hinterlassen Sie einen Kommentar. Vielen Dank fürs Lesen!
