jQuery | DIV Container beim scrollen oben „andocken“.

Einen DIV-Container an dem Browser Fenster oben zu fixieren ist nicht allzu kompliziert. In folgendem Beispiel ist der DIV immer oben fixiert.

HTML

<div class="top-fixed">Ich bleibe auch beim scrollen immer ganz oben</div>

CSS

.top-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

---

Jetzt möchten wir aber den DIV-Container erst oben andocken lassen, wenn wir unsere Webseite scrollen. Dazu verwenden wir am besten ein kurzes jQuery Skript. Das Skript kann man entweder in den Head Bereich der Webseite einbinden oder über ein externes File. Damit das Skript auch funktioniert, müssen wir die jQuery Bibliothek einbinden.

jQuery Bibliothek einbinden

Du kannst dir dafür die Bibliothek direkt herunterladen und im Head- bzw. Footer-Bereich deiner Webseite einbinden oder benutzt das CDN von jQuery.

CDN

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

Direkt einbinden

<script src="pfad/zur/jquery/datei.js" type="text/javascript"></script>

jQuery Skript integrieren

Nach der jQuery Bibliothek platzieren wir das Skript für unseren DIV Container.

<script type="text/javascript">
$(function() {
	var header = $( '.top-fixed' );
	var dis = header.offset().top, $window = $(window);
 	
	$window.scroll(function() {
        if ( $window.scrollTop() >= dis ) {
            header.addClass( 'scrolled' );
        } else {
            header.removeClass( 'scrolled' );
        }
    });
});
</script>

HTML

Unser DIV-Container bleibt gleich wie im ersten Beispiel.

<div class="top-fixed">Ich bleibe auch beim scrollen immer ganz oben</div>

CSS

Das CSS sieht dann wie folgt aus. In unserem Beispiel hat unser DIV einen Abstand von 50 Pixel zum oberen Browser-Rand.

Das CSS kannst du entweder direkt im Head Bereich einbinden oder in einer externen Datei. Entscheidest du dich für einen externe Datei, musst du die erste und letzte Zeile von meinem Beispiel entfernen. Und nicht vergessen die Datei auch zu verknüpfen.

<style>
.top-fixed {
  position: absolute;
  margin: 50px 0 0 0;
  width: 100%;
}
.top-fixed.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}
</style>

Um das Skript zu testen, braucht deine Webseite natürlich so viel Inhalt dass die Seite auch gescrollt werden kann. Sobald dann z.B. deine Menüleiste an der oberen Kante des Browserfensters ankommt, wird diese oben fixiert.

Wenn dir das Skript gefällt, freue ich mich auf deinen Kommentar.