Fullpage.js korrigierte Navigationsleiste – Implementierung der Positionierungsnavigation bar_javascript-Fähigkeiten

FullPage.js ist ein einfaches und benutzerfreundliches Plugin zum Erstellen von Websites mit Vollbild-Bildlauf (auch als Single-Page-Websites bekannt). Zusätzlich zum Erstellen eines Vollbild-Scrolleffekts können Sie Ihrer Website auch einige horizontale Schiebereglereffekte hinzufügen. Möglichkeit zur Anpassung an verschiedene Bildschirmgrößen, einschließlich Tablets und Mobilgeräten.

Ich habe angefangen, meinen eigenen Lebenslauf zu erstellen, und habe beschlossen, fullpage.js für das Scrollen im Vollbildmodus zu verwenden.

Nachdem ich das ganzseitige Dokument sorgfältig gelesen hatte, stellte ich fest, dass die folgenden Effekte erzielt werden können, ohne zusätzlichen JS-Code zu schreiben:

1. Beim Scrollen durch die Seiten findet die Navigationsleiste automatisch die Beschriftung dieser Seite

2. Wenn Sie auf die Beschriftung klicken, scrollen Sie natürlich zu dieser Seite, anstatt direkt zu springen.

1. Die Vorbereitungsarbeit muss darin bestehen, zuerst fullpage.js zu importieren Die offizielle Website ist
https://github.com/alvarotrigo/fullPage.js

Fullpage basiert auf JQuery, denken Sie also daran, JQuery zu importieren.

<link rel="stylesheet" href="styles/jquery.fullPage.css">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.fullPage.min.js"></script> 

2. Struktur der Navigationsleiste

Die Struktur der Navigationsleiste oben ist wie folgt: Der data-menuanchor wird von fullpage benötigt und das href-Attribut einer Notiz muss ebenfalls einen entsprechenden Wert haben.

<ul id="myMenu">
<li data-menuanchor="firstPage" class="menuList"><a href="#firstPage">首页</a></li>
<li data-menuanchor="secondPage"class="menuList"><a href="#secondPage">作品</a></li>
<li data-menuanchor="thirdPage" class="menuList"><a href="#thirdPage">技能</a></li>
<li data-menuanchor="fourthPage"class="menuList"><a href="#fourthPage">联系方式</a></li>
</ul> 

3. Der Aufbau der Scrollseite ist sehr einfach, wie folgt

<div id="fullpage">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
</div> 

4. Um die ganze Seite zu konfigurieren, js

Mein Konfigurationsinhalt ist wie unten gezeigt. Das erste paddingTop: „50px“ dient dazu, Platz für die feste Navigationsleiste zu schaffen

$(document).ready(function() {
$('#fullpage').fullpage({
paddingTop: '50px',
anchors:['firstPage', 'secondPage', 'thirdPage','fourthPage'],
menu: '#myMenu'});
}); 

Das zweite Element: Anker, hiermit werden die Ankerpunkte für die Bildlaufseite nacheinander festgelegt. Beachten Sie, dass dies dem data-menuanchor-Attribut des li-Tags in der Navigationsleiste und dem href-Attribut von a entsprechen muss.

Artikel 3: Es handelt sich um das verbindliche Menü, also die Navigationsleiste oben.

Weitere Konfigurationselemente finden Sie hier:
https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C %8818 %E6%97%A5.markdown

5. Aktive Stilstile hinzufügen

Auf diese Weise wird die gesamte Seite konfiguriert, aber der Stil der Navigationsleiste kann nicht je nach Seite geändert werden. Schauen wir uns zuerst die Konsole an

Wenn die Seite gescrollt wird, fügt fullpage.js die aktive Klasse dem entsprechenden Element im Menü hinzu. Dies ist einfach. Wir fügen einen CSS-Stil hinzu, um die Hintergrundfarbe der aktiven Klasse zu ändern .active{Hintergrundfarbe: #609F98;}

Auf diese Weise werden alle Effekte realisiert

PS: Möglicher kleiner Fehler, da Fullpage auch die aktive Klasse zur aktuellen Bildlaufseite hinzufügt, was bedeutet, dass dieser CSS-Stil die Hintergrundfarbe der Seite beeinflusst (zum Glück ist das von mir verwendete Hintergrundbild nicht betroffen, klug). Wie ich, haha), ich denke, wenn Sie es lösen möchten, müssen Sie möglicherweise eine Hintergrundfarbe zur Abschnittsklasse hinzufügen und !important hinzufügen.

Okay, das war's für alle mit der festen Navigationsleiste von Fullpage.js – die Implementierung der Positionierungsnavigationsleiste wird Ihnen helfen!