WordPress: Sticky Header im CoBlocks Theme

WordPress Notebook Pixabay

Eines der Dinge, die mich an dem aktuellen Theme dieses Blogs stört ist die Tatsache dass der Seiten-Header beim Scrollen nicht sichtbar bleibt. Das kann das Pro-Theme dieser kostenlosen Variante besser. Allerdings sehe ich nicht ein wegen des einen Features 59$ auszugeben.

Eine „Selbstbau-Lösung“ muss her. Und ich habe sie gefunden in Form einer kleinen JS-Funktion und dem passenden CSS. Das Javascripts gibts bei Medianotions, das CSS bei Internetkurse-Köln. In dem JS-Script muss die Zeile var element_to_stick=$('.site-header'); angepasst werden. Dort gehört die CSS-Klasse oder ID des Seiten-Headers rein.

/**
 * medianotions.de/webdesign-blog/jquery/sticky-header-mit-jquery/ 
 */

jQuery(document).ready(function($) {

  function sticky() {
    var window_top=$(window).scrollTop();
    var top_position=$('body').offset().top;
    var element_to_stick=$('.site-header');
        
    if (window_top > top_position) {
      element_to_stick.addClass('sticky');
    } else {
      element_to_stick.removeClass('sticky');
    }
  }
  $(window).scroll(sticky);
  sticky();
    
});

Der CSS-Code für dieses feststehenden Seiten-Header habe ich komplett übernommen. Lässt man alles über das obige Script laden springt die Webseite 1x beim scrollen. Das sieht unschön aus. Ich habe mich deshalb dazu entschlossen beim Scrollen nur die Zeile box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28); nachzuladen. Der Effekt ist optisch der Selbe, die Seite scrollt jedoch gleichmäßig.

/* 
 * internetkurse-koeln.de/wie-laesst-sich-der-wordpress-header-fixieren
 */

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  background-color: #ffffff !important;
} 

.sticky { /* Shadow per jquery.stickyHeader.min.js */
  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
}

.site-content { /* Anpassung an mobile Webseiten */
  margin-top: 4em !important;
}

Foto: Pixabay


7 Antworten auf “WordPress: Sticky Header im CoBlocks Theme”

    1. Ja, reicht. Allerdings wäre dann auch der Schatten ständig sichtbar. Ich hatte das am Anfang so getestet. Hat mir aber nicht gefallen. Deshalb blende ich den Schatten beim Scrollen per JS ein.

Schreibe einen Kommentar

Diese Kommentarfunktion speichert außer den Daten des Formulars auch Datum und Uhrzeit des Kommentars.

Ich bin mit der Speicherung und Verarbeitung meiner Daten durch diese Seite einverstanden