Implementiere eine portalähnliche Webseite

Einführung

In diesem Projekt lernst du, wie du eine portalähnliche Funktionalität auf einer Webseite implementierst. Die Portalfunktion ermöglicht es Benutzern, schnell auf langen Webseiten den gewünschten Inhalt zu finden und zu navigieren.

👀 Vorschau

Demonstration der Portalfunktionalität

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projektdateien und -struktur einrichtest
Wie du die Portalfunktionalität mit JavaScript und jQuery implementierst
Wie du sicherstellst, dass die Seitenschaltflächen sich basierend auf der Scrollposition des Benutzers färben

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Ein Webentwicklungsprojekt zu strukturieren und einzurichten
JavaScript und jQuery zu verwenden, um das DOM zu manipulieren und Benutzerinteraktionen zu verarbeiten
Eine portalähnliche Funktion zu implementieren, um die Benutzererfahrung auf langen Webseiten zu verbessern

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur sieht wie folgt aus:

├── index.html
├── css
├── images
└── js
    ├── index.js
    └── jquery-3.6.0.min.js

In dieser Struktur:
- index.html ist die Hauptseite.
- css ist der Ordner für die Stylingsdateien.
- images ist der Ordner für die Bildressourcen.
- js/index.js ist die JS-Datei, die abgeschlossen werden muss.
- js/jquery-3.6.0.min.js ist die jQuery-Bibliothekdatei.
Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
Öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Portalfunktionalität implementieren

In diesem Schritt wirst du den Code in der Datei js/index.js vervollständigen, um die Funktion des Portals zu implementieren.

Füge folgenden Code zur Datei js/index.js hinzu:

$(window).scroll(function () {
  // Wenn die Seite in den angegebenen Bereich scrollt, ändern sich die entsprechenden Seitenschaltflächen in Farbe.
  let top = scrollY;
  $("#lift a").removeClass("active-color");
  if (top >= 0 && top < 960) {
    $("#lift a:nth-of-type(1)").addClass("active-color");
  } else if (top >= 960 && top <= 1920) {
    $("#lift a:nth-of-type(2)").addClass("active-color");
  } else {
    $("#lift a:nth-of-type(3)").addClass("active-color");
  }
});

function toFunction(scrollTopVal) {
  // Klicken Sie auf die Schaltfläche, um zur angegebenen Position zu scrollen.
  window.scrollTo(0, scrollTopVal);
}

Erklärung:
- Die Funktion $(window).scroll() wird verwendet, um die Scrollposition der Seite zu detektieren.
- Wenn die Seite in den angegebenen Bereich scrollt, erhält die entsprechende Seitenschaltfläche einen aktiven Stil (.active-color), und die Stile der anderen Schaltflächen werden auf den Standardstil (.default-color) gesetzt.
- Die Funktion toFunction() wird verwendet, um die Seite zur angegebenen Position zu scrollen, wenn der Benutzer auf die Seitenschaltflächen klickt.

Portalfunktionalität testen

Gehe zurück zum Browser und aktualisiere die Seite.
Klicke auf die Schaltfläche oben, in der Mitte oder unten auf der Seite und beobachte, wie die Seite in den entsprechenden Bereich scrollt.
Vergewissere dich, dass die entsprechende Seitenschaltfläche einen aktiven Stil (.active-color) erhält, wenn die Seite in den angegebenen Bereich scrollt.

Das Endresultat ist unten gezeigt:

Demonstration der Portalfunktionalität

Herzlichen Glückwunsch! Du hast die Portalfunktionalität in deinem Projekt erfolgreich implementiert.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.