Wie zeige ich ein Div beim Herunterscrollen nach 800 Pixel an und verstecke es beim Hochscrollen?

Div beim Scrollen nach 800px Revisited anzeigen

In dieser erneuten Diskussion wollen wir unseren Ansatz zum Anzeigen eines versteckten Div beim Scrollen nach unten verfeinern nach 800px von der Seite oben.

Lösung:

Wir verwenden eine einfache Lösung mit der JavaScript-Funktion $(document).scroll() wie folgt:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

Erklärung:

1. scrollTop ruft die aktuelle vertikale Scrollposition des ab Seite.
2. Wenn scrollTop 800 Pixel überschreitet, wird das BottomMenu-Div mit fadeIn() sichtbar gemacht.
3. Umgekehrt, wenn scrollTop unter 800 Pixel fällt, wird BottomMenu mit fadeOut() ausgeblendet.

Verbesserung für Scrollen Nach oben:

Um diese Lösung zu verbessern, können wir eine Funktionalität hinzufügen, um „bottomMenu“ auszublenden, wenn nach oben gescrollt wird und die Bildlaufhöhe weniger als 800 Pixel beträgt:

if (y < 800 && $('.bottomMenu').css('display') !== 'none') {
    $('.bottomMenu').fadeOut();
}

Diese zusätzliche Bedingung stellt sicher, dass „bottomMenu bleibt ausgeblendet, wenn nach oben gescrollt wird und die Scrollhöhe weniger als 800 Pixel beträgt.

Das obige ist der detaillierte Inhalt vonWie zeige ich ein Div beim Herunterscrollen nach 800 Pixel an und verstecke es beim Hochscrollen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!