Mit jQuery HTML Container eine andere CSS Klasse zuweisen

Immer häufiger finden sich auf Webseiten Elemente die nach dem Scrollen im Browser sich entweder bewegen, verschwinden oder eingeblendet werden. Dahinter steckt im Grunde ein simpler jQuery Code. Als Beispiel nehmen wir ein DIV Container mit einer CSS Klasse „sichtbar“.

HTML

<div class="sichtbar">
  Hier befindet sich Text, Bild oder ein Menü.
</div>

Jetzt möchten wir diesen DIV Container verschwinden lassen, aber erst wenn der Besucher nach unten scrollt. Dazu verwenden wir folgenden jQuery Code den wir in den „head“ Bereich unseres HTML-Templates einbinden. Die Einbindung der jQuery Bibliothek ist natürlich vorausgesetzt und sollte über diesem Code passieren.

jQuery

$(document).ready(function() {
            
    $(window).bind("scroll",function(){
        if($(this).scrollTop()>80){
            $(".sichtbar").addClass("hidden");
        } else {
            $(".sichtbar").removeClass("hidden")
        }
    });
   
});

Die 80 bedeutet, sobald der Besucher die Webseite weiter als 80 Pixel von oben runterscrollt wird dem DIV Container „sichtbar“ die CSS Klasse „hidden“ hinzugefügt. Dieser Klasse können wir im CSS ein „display: none“ geben und unser Container verschwindet. Scrollt der User wieder nach oben unter die 80 Pixel Grenze, wird dem Container die Klasse „hidden“ wieder entfernt und er erscheint wieder. In Kombination mit einer CSS3 Transition, kann man hier nette Effekte integrieren. Vollständigkeitshalber hier noch das CSS.

CSS

.hidden {
  display: none;
}