Wie zeige ich ein Div an, nachdem ich 800 Pixel nach unten gescrollt habe, und verstecke es beim Scrollen nach oben?

Div beim Herunterscrollen nach 800 Pixel anzeigen

Frage:

Wie kann ich eine erstellen? Wird ein verstecktes Div angezeigt, nachdem 800 Pixel vom oberen Rand der Seite nach unten gescrollt wurden? Wenn Sie nach oben scrollen und die Höhe weniger als 800 Pixel beträgt, sollte das Div verschwinden.

HTML:

<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;
}

jQuery-Variante zum Scrollen 800px:

Dieser jQuery-Code zeigt das Div nach dem Scrollen nach unten an. 800px:

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

Scroll-Ereignisvariante zum Ausblenden beim Scrollen nach oben:

Um das Div auszublenden, wenn Sie nach oben scrollen und die Höhe weniger als 800 Pixel beträgt, verwenden Sie dies Code:

$(document).scroll(function() {
  var height = $(window).scrollTop();

  if (height > 800) {
    $('.bottomMenu').css({
      display: 'block',
      opacity: 1
    });
  } else {
    $('.bottomMenu').css({
      display: 'none',
      opacity: 0
    });
  }
});

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