Wie kann ich ein Div basierend auf der Bildlaufposition ein- und ausblenden?

Verstecktes Div anzeigen, nachdem 800 Pixel von oben gescrollt wurden

Szenario:

Sie möchten ein verstecktes Div nach dem Benutzer anzeigen Scrollt auf der Seite um 800 Pixel nach unten. Wenn der Benutzer außerdem nach oben scrollt und die Höhe weniger als 800 Pixel beträgt, sollte das Div verschwinden.

HTML-Struktur:

<div class="bottomMenu">
  <!-- Content -->
</div>

CSS:

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

JavaScript (jQuery):

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

Erklärung:

Dieses Skript überwacht die Scrollposition des Dokuments. Wenn die Bildlaufposition größer als 800 Pixel wird, wird die Einblendanimation für das .bottomMenu-Div ausgelöst. Wenn die Bildlaufposition hingegen unter 800 Pixel fällt, wird die Ausblendanimation ausgelöst.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div basierend auf der Bildlaufposition ein- und ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!