Es ist möglicherweise keine schlechte Sache, einige Räder selektiv zu wiederholen. Aarons Blog hat ein suspendiertes Menü hinzugefügt, das sehr groß zu sein scheint. Obwohl diese Art von Trick nicht das erste Mal ist, dass ich es gesehen habe, habe ich es nie selbst geschrieben. Heute werde ich selektiv über diese Funktion schreiben. Das Folgende ist der Entwicklungsprozess dieses Rades, der auch als Analyse- und Implementierungsprozess eines Anforderungsdokuments angesehen werden kann.
Demo -Adresse: http://sandbox.runjs.cn/show/to8wdmuy
Quellcode herunterladen: https://github.com/bjtqti/floatmenu
Der erste Schritt besteht darin, eine DOM -Abschnittsstruktur zu erstellen:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> AppCarrier </title>
<link rel = "stylesheet" href = "mseu.css">
</head>
<body>
<div id = "content">
<h1 id = "test1"> test1 </h1>
<p> Die Vergangenheit kann weh tun. Aber Sie können entweder davon rennen oder daraus lernen </p>
<p> Die Vergangenheit war schmerzhaft, aber Sie entkommen oder wachsen daraus </p> </p>
<p> Einer trifft sein Schicksal auf der Straße, die er nimmt, um es zu vermeiden </p>
<p> Es ist oft auf dem Weg, dem Schicksal zu entkommen, aber es begegnet unerwartet </p>
<p> Regeln sollen gebrochen werden </p>
<p> Die Regeln sollten gebrochen werden. </p>
<p> Jahre können die Haut falten, aber die Begeisterung aufgeben, falten die Seele. </p>
<p> Der Zeitverlauf macht das Gesicht nur alt, aber die Leidenschaft macht das Herz nicht mehr. </p>
<h1 id = "test2"> test2 </h1>
<p> Nur durch ständiges Üben des Wissens, das Sie gelernt haben, können Sie es wirklich beherrschen. </p>
<p> jeden Tag in vollen Zügen leben. </p>
<p> jeden Tag genießen. </p>
<p> Behalte die Sterne und deine Füße auf dem Boden. </p>
<p> Haben Sie hohe Ambitionen und halten Sie Ihre Füße auf dem Boden. </p>
<p> Sei immer für ein unerwartetes Abenteuer. </p>
<p> Bereit sich jederzeit ein unerwartetes Abenteuer beginnen. </p>
<p> Leben ist voller Enttäuschung. Sie können sich nicht mit Dingen befassen. Sie müssen weitermachen. </P>
<p> Das Leben ist oft unglücklich, gönnen Sie sich in der Vergangenheit nicht und gehen Sie mutig vorwärts. </p>
<p> Ich bin ein freier Geist. Ich kann nicht käfigig sein. </P>
<p> Meine Seele ist frei und sollte nicht gebunden werden. </p>
<p> Manchmal sieht das Herz, was für das Auge unsichtbar ist. </p>
<p> Diejenigen, die außer Sicht sind, können es fühlen </p>
<p> Die einfachen Dinge sind auch die außergewöhnlichsten Dinge, und nur die Weisen können sie sehen. </p>
<p> Das Gewöhnlichste ist auch das Außergewöhnlichste, und nur die Weisen verstehen es. </p>
<h1 id = "test3"> test3 </h1>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
<p> wie viele xxxxxx </p>
</div>
<div id = "Menubar">
<p> Versteck </p>
<ul>
<li> <a href = "#test1"> test1 </a> </li>
<li> <a href = "#test2"> test2 </a> </li>
<li> <a href = "#test3"> test3 </a> </li>
<li> <a href = "#test4"> test4 </a> </li>
</ul>
</div>
</body>
<script src = "mseu.js"> </script>
</html>
Der zweite Schritt besteht darin, die CSS -Datei vorzubereiten:
Die Codekopie lautet wie folgt:
ul {
Typ-Typ-Typ: Keine;
}
A {
Textdekoration: Keine;
}
/*Artikelinhaltsbereich*//
#Inhalt {
Breite: 400px;
Rand: 0 Auto;
Schriftgröße: 2EM;
}
/*Schwimmendes Menü*///
.Speisekarte {
Position: fest;
Top: 20%;
Rechts: 0;
Breite: 200px;
Grenze: 1px Festgrau;
Border-Radius: 5px;
}
.Menu li {
Höhe: 2em;
Linienhöhe: 2EM;
}
.Rot {
Farbe: Rot;
}
.verstecken {
Anzeige: Keine;
}
/*Floating -Menü ausblenden*///
.Slidein {
Transformation: Translate3d (202px, 0, 0);
Übergangsdauer: .5s;
}
/*Zeigen Sie das schwimmende Menü*//
.Slideout {
Transformation: Translate3d (0, 0, 0);
Übergangsdauer: .5s;
}
.static {
Farbe:#007Aff;
Text-Align: Mitte;
}
/*Zeigen Sie den schwimmenden Ball*///
.toShow {
Anzeige: Block;
Breite: 4,8em;
Höhe: 2em;
Linienhöhe: 2EM;
Grenzradius: .5em;
Grenze: 1px Festgrau;
Transformation: Translate3D (-5em, 0, 0);
Übergangsdauer: 1s;
}
Der dritte Schritt beginnt mit dem Schreiben von JS -Code:
Die Codekopie lautet wie folgt:
(Funktion (doc) {
// Linksorte für jedes Kapitel sammeln
var pos = [],
// Sammlung von Elementen auf der Speisekarte
links = doc.getElementsByTagName ('a'),
// Sammeln Sie den Titel des Kapitels
Titel = doc.getElementsByTagName ('H1'),
// Menü hängen
Menü = doc.getElementById ('Menubar'),
// Stromauswahl
CurrentItem = null;
// einen roten Stil hinzufügen
var addClass = Funktion (Element) {
currentItem && currentItem.removeAttribute ('Klasse');
element.setAttribute ('Klasse', 'rot');
CurrentItem = Element;
},
// Die Webseite ist hoch eingeführt:
getCrolltop = function () {
return math.ceil (document.body.scrolltop) +1;
},
// Berechnen Sie die Bildlaufposition
startcroll = function () {
var scrolltop = getCrolltop (),
len = titles.length,
i = 0;
// Artikel 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
AddClass (Links [0]);
zurückkehren;
}
// der letzte
if (scrolltop> = pos [len-1]) {
AddClass (Links [Len-1]);
zurückkehren;
}
//Mitte
für (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
AddClass (Links [i]);
brechen;
}
}
};
// Klicken Sie auf den Link in der Liste, um die Farbe zu ändern
Menü.onclick = Funktion (e) {
var target = e.target || e.srcelement;
if (target.nodename.tolowerCase () === 'a') {
// Auflistung der Elementstatusanzeige
AddClass (Ziel);
zurückkehren;
}
if (target.nodename.tolowerCase () === 'p') {
if (target.className == 'static') {
// Menü verbergen
this.className = 'Menü Slidein';
setTimeout (function () {
target.className = 'static toShow';
target.innerhtml = 'show';
}, 1000);
}anders{
// Menü anzeigen
target.className = 'static';
target.innerhtml = 'hide';
this.className = 'Menü -Diasout';
}
}
}
// Berechnen Sie die Anfangsposition jedes Kapitels
var ln = titles.length;
while (-ln> -1) {
//titlesuten weibliche. offsetParent.offsettop = 0;
pos.unshift (Titel [ln] .offsettop);
}
startcroll ();
//Scrollen
window.onscroll = function () {
startcroll ()
}
})(dokumentieren);
analysieren:
1. Implementieren Sie den automatischen Sprung zum angegebenen Abschnitt
Dieser Schritt kann mit der Ankerfunktion des <a> Tags durchgeführt werden. Da HTML5 das Namensattribut in der Zukunft nicht unterstützt (HTML5 unterstützt es nicht. Geben Sie den Namen des Ankers an). Erwägen Sie, ID zum Springen zu verwenden.
2. Identifizieren Sie, welches Kapitel im Inhalt links zum Element im schwimmenden Menü gehört.
Dieser Schritt ist ein schwieriger Punkt. Lassen Sie uns kurz analysieren:
2.1 Der erste Fall besteht darin, manuell auf den Menüpunkt zu klicken. Dies ist einfach. Identifizieren Sie einfach das geklickte Element.
2.2 Im zweiten Fall scrollen Sie oder ziehen Sie die Bildlaufleiste durch die mittlere Maustaste. Zu diesem Zeitpunkt müssen Sie den Inhalt links und die Menüelemente rechts in Verbindung bringen. Dies ist der schwierigste Teil. Berücksichtigen Sie die Strategie, Schritt für Schritt zu implementieren, beginnend mit einfach und dann schwierig, und jeder bricht durch.
2.2.1 Sammeln Sie zunächst die Koordinatenhöhe des Titelelements. Das ist die vertikale Höhe aller H1 -Tags. Speichern Sie Array 1.
2.2.2 Sammeln Sie das Element A im Menüpunkt und speichern Sie es in Array 2.
2.2.3 Hören Sie sich das Bildlaufereignis an und bestimmen Sie, zu welchem Menüelement der aktuelle Inhalt gehört.
Bei einem Schritt wird empfohlen, ein Bild auf dem Manuskriptpapier zu zeichnen:
A1
******************
* A2
*
******************
* A3
*
******************
*
* A4
*
Jedes Mal, wenn Sie scrollen, bestimmen Sie, in welchem Bereich der aktuelle Scroll -Abstand ist. Wenn es 0 bis A1 ist, ist es Kapitel 1, A1 bis A2, es ist Kapitel 2 und so weiter.
In Bezug auf die Positionshöhe des Elements verwende ich einfach Element.offsettop, um es hier zu erhalten. Es kann Kompatibilitätsprobleme geben. Wenn Sie JQuery verwenden, sollte es $ ('Element'). Offset (). Top, sein
In ähnlicher Weise habe ich einfach ein Dokument verwendet.body.Scrolltop, um die Höhe der Scrollbar zu erhalten. Wenn es durch JQuery ersetzt wird, sollte es $ (Fenster) sein .Scrolltop ();
Der Zweck des Zeichnens besteht darin, abstrakte Probleme zu konkretisieren, uns zu helfen, die Regeln zu denken und herauszufinden. Vielleicht sieht es größer aus, indem es es "Modellierung" nennt.
Es sollte betont werden, dass die Beziehungen in Array 1 und Array 2 einzeln entsprechen sollten. Zum Beispiel ist die entsprechende <a href = "#h1"> <h1 id = "h1">.
2.3 Im dritten Fall ist der Menüstatusanzeigen, wenn Sie die Seite direkt eingeben. Wenn Sie beispielsweise eine Adresse wie Index.html#H3 eingeben, sollte der H3 im Menü hervorgehoben werden.
3. Implementieren Sie die Anzeige und verbergen Sie die Animation des schwimmenden Menüs.
3.1 Dieser Schritt sollte relativ einfach sein, Sie können dies zuerst in Betracht ziehen. Verwenden Sie einfach die Tramsform -Eigenschaft von CSS3. Es ist einfach und effizient. Wenn Sie sich kreuzen lassen, seien Sie bitte kompatibel.
Beachten Sie, dass Transformation: Translate3D (x-Achse, y-Achse, Z-Achse); Die Verwendung von 3D kann Hardware -Beschleunigung verwenden, um Animationseffekte zu erhöhen, aber der Stromverbrauch wird zunehmen. Nutzen Sie sie also gut! Der erste Parameter besteht darin, die linke und rechte Richtungen zu steuern. Wenn es positiv ist, bedeutet es, nach rechts zu gehen, und wenn es negativ ist, bedeutet es, nach links zu bewegen. Dies ist eigentlich nicht streng. Tatsächlich sollte es basierend auf dem Referenzpunkt bestimmt werden. Wenn beispielsweise die X -Koordinate eines Elements 0 beträgt, wird der Wert von x nach rechts erhöht und nach links reduziert und 0 zurückgesetzt.
Nach der Analyse ist der Code geschrieben. Darüber gibt es nichts zu sagen. Genießen Sie das musikalische Gefühl, das durch Eingabe der Tastatur erzeugt wird.
Nach dem Schreiben, Vorschau, klicken Sie auf das Menü, springen Sie zum angegebenen Kapitel und klicken Sie auf das Element, um rot zu werden, die aktuelle Seite zu aktualisieren, und die Abhängigkeitsanzeige ist korrekt. Schieben Sie das Bildlaufrad und die Menüelemente ändern sich entsprechend mit den Änderungen des Inhalts. Ziehen Sie die Bildlaufleiste. Das gleiche ist wahr. Klicken Sie zum Schluss, um auszublenden, das Menü zurückzuziehen, klicken, um anzuzeigen, und das Menü gleitet aus. Dadurch wird die Suspensionsfunktion abgeschlossen.
Das obige dreht sich alles um diesen Artikel, ich hoffe es gefällt euch.