Wie zeige ich ein Div beim Scrollen nach 800 Pixel an?

Div beim Herunterscrollen nach 800 Pixel anzeigen

Einführung

In diesem Artikel wird das Problem der Anzeige eines versteckten Div beim Herunterscrollen über einen bestimmten Punkt hinaus behandelt auf einer Webseite. Das Ziel besteht darin, dies zu erreichen, nachdem der Benutzer 800 Pixel vom oberen Rand der Seite gescrollt hat, und gleichzeitig sicherzustellen, dass das Div beim Zurückscrollen ausgeblendet wird und die Scrollhöhe weniger als 800 Pixel beträgt.

HTML-Struktur

Der HTML-Code für das betreffende Div lautet wie folgt:

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

CSS Styling

Das folgende CSS wird auf das div angewendet:

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

jQuery-Skript

Ursprünglich bereitgestelltes jQuery-Skript:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

Überarbeitetes jQuery-Skript für die gewünschte Funktionalität

Um die gewünschte Funktionalität zu erreichen, muss das jQuery-Skript wie folgt geändert werden folgt:

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

Fazit

Dieses überarbeitete jQuery-Skript zeigt das Div an, nachdem mehr als 800 Pixel vom oberen Rand der Seite nach unten gescrollt wurden. Wenn Sie nach oben scrollen und die Scrollhöhe weniger als 800 Pixel beträgt, wird das Div ausgeblendet.

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