Dieses Code-Snippet fügt einer Webseite einen Lesefortschrittsbalken hinzu. Die Leiste stellt visuell den Scroll-Fortschritt des Benutzers durch den Hauptinhaltsbereich dar. Lassen Sie uns die Funktionsweise aufschlüsseln und verbessern.

Der Code versucht, den Fortschritt basierend auf der Bildlaufposition relativ zur Gesamth?he des main-Elements zu berechnen. Es gibt jedoch mehrere Probleme:

• Unvollst?ndiger Code: Der bereitgestellte Code ist abgeschnitten. Es fehlt der entscheidende Teil, der den Fortschrittsbalken tats?chlich erstellt und visuell aktualisiert. Das div wird erstellt, aber es ist keine Styling- oder Fortschrittsaktualisierungslogik vorhanden.
• Falsche H?henberechnung: Die Berechnung von totalHeight kann je nach Seitenstruktur ungenau sein. Die Verwendung von outerHeight(true) schlie?t R?nder ein, die m?glicherweise unerwünscht sind. Es berücksichtigt auch keinen dynamischen Inhalt, der die H?he nach der ersten Berechnung ?ndern k?nnte.
• Fehlende Fortschrittsaktualisierung: Es gibt keinen Code, um den Fortschrittsbalken zu aktualisieren, w?hrend der Benutzer scrollt. Die Berechnung erfolgt nur einmal, wenn das Dokument fertig ist.
• Problem mit der Fu?zeilenh?he: Das Subtrahieren von footerHeight kann zu einer falschen Fortschrittsberechnung führen, wenn die Fu?zeile fest ist oder den Hauptinhalt überlappt.

Hier ist eine verbesserte Version, die diese Probleme behebt:

$(document).ready(function() {
  if ($('body').hasClass('single')) {
    const progressBar = $('<div id="reading-progress"></div>');
    $('header').after(progressBar);

    let totalHeight = $('main').height(); // Use height() for more accurate calculation
    let windowHeight = $(window).height();

    $(window).on('scroll', function() {
      let scrollTop = $(this).scrollTop();
      let progress = (scrollTop / (totalHeight - windowHeight)) * 100; // Adjust for window height
      progress = Math.min(progress, 100); // Cap progress at 100%
      $('#reading-progress').css('width', progress + '%');
    });
  }
});

Dieser verbesserte Code:

1. Erstellt einen Fortschrittsbalken: Es wird dynamisch ein div mit der ID reading-progress erstellt, der als Fortschrittsbalken fungiert.
2. Verwendet height(): Es verwendet height() anstelle von outerHeight(true) für eine genauere Berechnung der Hauptinhaltsh?he.
3. Verarbeitet Scroll-Ereignisse: Es verwendet $(window).on('scroll', ...), um die Breite des Fortschrittsbalkens kontinuierlich zu aktualisieren, w?hrend der Benutzer scrollt.
4. Berechnet den Fortschritt genau: Die Fortschrittsberechnung berücksichtigt die sichtbare Fensterh?he und verhindert, dass der Balken 100 % überschreitet.
5. Fügt CSS hinzu (erforderlich): Sie müssen CSS hinzufügen, um das #reading-progress-Div zu formatieren. Zum Beispiel:

#reading-progress {
  height: 5px; /* Adjust height as needed */
  background-color: #007bff; /* Adjust color as needed */
  position: fixed;
  top: 0;
  left: 0;
  width: 0; /* Initially 0% width */
  z-index: 1000; /* Ensure it's on top */
}

Denken Sie daran, jQuery in Ihr Projekt einzubinden, damit dieser Code funktioniert. Dieser überarbeitete Code bietet einen robusteren und genaueren Lesefortschrittsbalken. Weitere Verfeinerungen k?nnten die Handhabung von Randgeh?usen und das Hinzufügen eines anspruchsvolleren Designs umfassen.

Das obige ist der detaillierte Inhalt vonLesefortschrittsbalken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!