Einige Räder gezielt neu zu erfinden ist nicht unbedingt eine schlechte Sache. Zu Aarons Blog wurde ein schwebendes Menü hinzugefügt, das sehr hochwertig zu sein scheint. Obwohl dies nicht das erste Mal ist, dass ich einen solchen Trick sehe, habe ich ihn nie selbst geschrieben. Heute werde ich selektiv über diese Funktion schreiben. Das Folgende ist der Entwicklungsprozess dieses Rads, der auch als Analyse- und Implementierungsprozess eines Anforderungsdokuments angesehen werden kann.

Demo-Adresse: http://sandbox.runjs.cn/show/to8wdmuy

Quellcode-Download: https://github.com/bjtqti/floatmenu

Der erste Schritt besteht darin, die DOM-Knotenstruktur zu erstellen:

Code kopieren Der Code lautet wie folgt:

AppCarrier

test1

Die Vergangenheit kann weh tun, aber man kann entweder davor fliehen oder daraus lernen

Die Vergangenheit ist schmerzhaft, aber man kann ihr entweder entkommen oder daran wachsen

„

Regeln sind dazu da, gebrochen zu werden

Regeln sollten gebrochen werden.

Jahre können die Haut runzeln, aber die Begeisterung aufzugeben, runzelt die Seele.

& Lt; p & gt; Der Lauf der Jahre lässt das Gesicht nur alt werden und die Leidenschaft verdorrt nicht mehr.

& Lt; h1 id = "test2" & gt; test2 & lt;/h1 & gt;

Nur wenn Sie das erlernte Wissen ständig anwenden, können Sie es wirklich meistern.

Lebe jeden Tag in vollen Zügen.

Genieße jeden Tag.

& Lt; p & gt;

Seien Sie immer bereit für ein unerwartetes Abenteuer.

& Lt; p & gt; jederzeit bereit, ein zufälliges Abenteuer zu beginnen.

Das Leben ist voller Enttäuschungen. Man muss weitermachen.

& Lt; p & gt; Das Leben ist oft unbefriedigend, schwelgen Sie nicht in der Vergangenheit, gehen Sie mutig voran.

Ich bin ein freier Geist.

Meine Seele ist frei und sollte nicht gebunden sein.

& Lt; p & gt; Manchmal sieht das Herz, was für das Auge unsichtbar ist. & Lt;/p & gt;
& Lt; P & gt; Wer die Augen nicht sieht, fühlt das Herz & lt;/p & gt;

Die einfachen Dinge sind auch die außergewöhnlichsten Dinge, und nur die Weisen können sie sehen.

Die gewöhnlichsten Dinge sind auch die außergewöhnlichsten Dinge, nur die Weisen können sie verstehen.

& Lt; h1 id = "test3" & gt; test3 & lt;/h1 & gt;

wie viele xxxxxx

how many xxxxxx

test4

how many xxxxxx

Ausblenden

Der zweite Schritt besteht darin, die CSS-Datei vorzubereiten:

Code kopieren

Der Code lautet wie folgt: ul { Listenstiltyp: keiner; } ein {

Textdekoration: keine;

}

/*Artikelinhaltsbereich*/

#Inhalt {

Breite:400px;

Rand: 0 automatisch;

Schriftgröße: 2em;

}

/*Menü ausgesetzt*/

.menu {

Position: fest;

Oben:20 %;

Rechts: 0;

Breite:200px;

Rand: 1 Pixel einfarbig grau;

Randradius: 5px;

}

.menu li {

Höhe: 2em;

Zeilenhöhe: 2em;

}

.red {

Farbe: rot;

}

.hide {

Anzeige: keine;

}

/*Floating-Menü ausblenden*/

.slideIn {

Transformieren: Translate3d(202px, 0, 0);

Übergangsdauer: .5s;

}

/*Floating-Menü anzeigen*/

.slideOut {

Transformieren: Translate3d(0, 0, 0);

Übergangsdauer: .5s;

}

.static {

Farbe:#007aff;

Textausrichtung: zentriert;

}

/*Suspendierten Ball anzeigen*/

.toShow {

Anzeige: block;

          Breite: 4,8 cm;

Höhe: 2em;

         Zeilenhöhe: 2em;

         Randradius: .5em;

Rand: 1 Pixel durchgehend grau;

Transformieren: translator3d(-5em, 0, 0);

Übergangsdauer: 1s;

}

Der dritte Schritt besteht darin, mit dem Schreiben von js-Code zu beginnen:

Code kopieren

Der Code lautet wie folgt:

(Funktion(doc){

//Sammeln Sie die Linkpositionen jedes Kapitels

var pos = [],

​​​​ //Elemente im Menü sammeln

          links = doc.getElementsByTagName('a'),

//Kapiteltitel sammeln

titles = doc.getElementsByTagName('h1'),

//Menü ausgesetzt

           menu = doc.getElementById('menubar'),

//Aktuelle Auswahl

           currentItem=null;

//Roten Stil hinzufügen

var addClass = Funktion (Element){

                  currentItem && currentItem.removeAttribute('class');

                element.setAttribute('class','red');

                  currentItem = element;

         },

// Die Webseite wird nach oben gerollt: 

         getScrollTop = function (){

               return Math.ceil(document.body.scrollTop) 1;

},

//Bildlaufposition berechnen

StartScroll = function (){

            var scrollTop = getScrollTop(),

                   len = titles.length,

                  i = 0;

//Artikel 1

If(scrollTop>=0 && scrollTop
                   addClass(links[0]);

                  zurück;

            }

// Letzter <条>
If(scrollTop>=pos[len-1]){

                    addClass(links[len-1]);

                  zurück;

            }

// In der Mitte 
for(;i
If(scrollTop > pos[i] && scrollTop < pos[i 1]){

                      addClass(links[i]);

Pause;

                }

            }

};

//Klicken Sie auf einen Link in der Liste, um die Farbe zu ändern

menu.onclick=function(e){

        var target = e.target || e.srcElement;

If(target.nodeName.toLowerCase() === 'a'){

//Statusanzeige des Listenelements

               addClass(target);

              zurück;

         }

If(target.nodeName.toLowerCase() === 'p'){

If(target.className == 'static'){

//Menü ausblenden
This.className = 'menu slideIn';

                    setTimeout(function(){

                                target.className = 'static toShow';

Target.innerHTML = 'Display';

                   },1000);

                }else{

//Menü anzeigen

                         target.className = 'static';

                        target.innerHTML = 'Hide';

This.className = 'menu slideOut';

            }

         }

}

//Berechnen Sie die Anfangsposition jedes Kapitels

var ln = titles.length;

; while(--ln>-1){

​​​​ //titles[len].offsetParent.offsetTop = 0;

           pos.unshift(titles[ln].offsetTop);

}

StartScroll();

//Hören Sie sich das Scrollen an

​ window.onscroll = function(){

StartScroll()

}

})(Dokument);

Analyse:

1. Springen Sie automatisch zum angegebenen Abschnitt

Dieser Schritt kann mithilfe der Ankerfunktion des -Tags durchgeführt werden. Da HTML5 das Namensattribut in Zukunft nicht mehr unterstützt. Geben Sie den Namen des Ankers an Mit ID springen.

2. Identifizieren Sie, zu welchem Kapitel im Inhalt auf der linken Seite das Element im schwebenden Menü gehört.

Dieser Schritt ist schwierig, analysieren wir ihn zunächst kurz:

2.1 Die erste Situation besteht darin, manuell auf den Menüpunkt zu klicken. Das ist ganz einfach: Identifizieren Sie einfach das angeklickte Element.

2.2 Im zweiten Fall scrollen Sie mit der mittleren Maustaste oder ziehen Sie die Bildlaufleiste. Zu diesem Zeitpunkt müssen Sie den Inhalt auf der linken Seite mit den Menüpunkten auf der rechten Seite verknüpfen. Überlegen Sie sich eine Strategie, mit der Sie es Schritt für Schritt umsetzen, beginnend mit den einfacheren und dann mit den schwierigeren, und diese dann nach und nach besiegen.

2.2.1 Erfassen Sie zunächst die Koordinatenhöhe des Titelelements. Das ist die vertikale Höhe aller h1-Tags. In Array 1 speichern.

2.2.2 Sammeln Sie die a-Elemente in den Menüpunkten und speichern Sie sie in Array 2.

2.2.3 Abhören von Scroll-Ereignissen und Bestimmen, zu welchem Menüpunkt der aktuelle Inhalt gehört.

Wenn Sie einen Schritt ausführen, empfiehlt es sich, ein Bild auf das Manuskriptpapier zu zeichnen:

******************
                                                                                               *
                                                                                                                                                                                                                                      *
                                                                                                                                    *
                                                                                          *

Bestimmen Sie bei jedem Scrollen, welches Intervall der aktuelle Scrollabstand ist. Wenn es 0 bis A1 ist, ist es Kapitel 1, A1 bis A2 ist Kapitel 2 und so weiter.

Bezüglich der Position und Höhe des Elements verwende ich einfach element.offsetTop. Es kann zu Kompatibilitätsproblemen kommen. Wenn Sie dazu jquery verwenden, sollte es $('element').offset() sein. oben,

Ebenso habe ich die Höhe des Rollbalkens verwendet, um ihn abzurufen. Wenn er durch jquery ersetzt wird, sollte er $ (window) sein

Die Funktion des Zeichnens besteht darin, abstrakte Probleme konkret zu machen und uns beim Nachdenken und Erlernen der Regeln zu helfen. Vielleicht wäre es etwas edler, es „Modellieren“ zu nennen.

Es sollte betont werden, dass die Beziehung zwischen Array 1 und Array 2 eine Eins-zu-Eins-Entsprechung sein sollte. Beispielsweise entspricht