Sie befinden sich hier:
» 
» 
02.01.2015

Header scrollbar / fixiert am oberen Fensterrand

Kategorie(n): HTML und CSS Tipps

Nachdem ich bereits zwei Varianten vorgestellt habe, bei denen Header und Footer fest stehen und sich nur am Contentbereich ein Rollbalken befindet bzw. sich der Rollbalken über das gesamte Browserfenster erstreckt, möchte ich heute eine weitere Variante vorstellen. Dabei scrollt der Header bis an den oberen Bildrand und die integrierte Navigation bleibt dort im sichtbaren Bereich fixiert stehen.

Im Gegensatz zu den bereits vorgestellten Versionen ist hier Javascript zwingend notwendig. Das Beispiel ist mit HTML5 realisiert und unterstützt ältere Browser bis einschließlich IE6. Die Webseite kann ebenso mit HTML4 realisiert werden, d.h. mit <div> anstelle von <header> etc. Wichtig ist allerdings, dass Sie einen validen DOCTYPE wählen, damit die Webseiten im Standard-Mode und nicht im Quircks-Mode laufen.

Grundgerüst für die Webseite

Die folgenden CSS-Angaben sind für ein browserübergreifendes Grundgerüst notwendig. Die Definition der HTML5-Elemente als Blockelement ist notwendig, um ältere Browser, die erst HTML5-tauglich gemacht werden müssen, in eine definierte Ausgangslage zu versetzen. Wie ältere Browser HTML5-tauglich gemacht werden, habe ich bereits in diesem Blog beschrieben, darauf möchte ich an dieser Stelle nicht explizit eingehen.

html, body {
  height:100%;
  margin:0;
  padding:0;
}

header, nav, section {display: block;}

header {
  top:0px;
  position:relative;
  height:10em;
  width:100%;
  z-index:10;
}
#Content {
  top:0;
  position:relative;
}

Spezielle Angaben für die Navigation

Hier folgen die wesentlichen Angaben, um das Scroll-Verhalten der Navigation dahingehend zu beeinflussen, dass sie bis an den oberen Rand des Browserfensters mit scrollt und danach im oberen Bereich sichtbar stehen bleibt. Es werden für beide Fälle jeweils Stylesheets definiert. Diese beinhalten die Standardangaben für das <nav>-Element und in einer zusätzlichen CSS-Klasse Angaben für den Fall, dass die Navigation am oberen Rand des Browserfenster fixiert ist.

nav {
  bottom:0px;
  height:3em;
  left:0px;
  position:absolute;
  width:100%;
}
* html nav {
  top:expression(auto);
}
.fixed-navi {
  top:0px;
  position:fixed !important;
  position:absolute;
}
* html .fixed-navi {
  top:expression(documentElement.scrollTop);
}

Das Prinzip ist relativ einfach. Sie prüfen per Javascript die Position der Navigationsleiste. Ist der obere Bildschirmrand erreicht, so wird einfach die zusätzliche CSS-Klasse „fixed-navi“ dem <nav>-Element zugeordnet. Beim Scrollen in die Gegenrichtung erfolgt das Entfernen der Klasse „fixed-navi“ auf die gleiche Art und Weise.

Javascript, für scroll / fixed Header

Die Minimalversion des Javascriptes ist hier aufgelistet. Im onLoad-Event wird die Webseite nach oben gescrollt und die Startposition des Navigation registriert. Beim Scrollen (onScroll-Event) wird anhand der aktuellen Position der Navigation, die CSS-Klasse „fixed-navi“ gesetzt bzw. entfernt. Um die gängigsten Browser (auch abwärtskompatibel) abzudecken, ist noch ein wenig Zusatzaufwand nötig (Ergänzung der trim-Function, falls noch nicht unterstützt; browserabhängige Ermittlung der topPos).

<script type="text/javascript">
  var startPos;

  if(typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function() {
      return this.replace(/^\s+|\s+$/g, '');
    }
  }

  window.onload=function(){
    window.scrollTo(0,0);
    startPos = document.getElementsByTagName("nav")[0].offsetTop;
  };

  window.onscroll = function () {
    elem = document.getElementsByTagName("nav")[0];
    var myFixedClass='fixed-navi';

    var body=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
    var topPos=document.all? body.scrollTop : pageYOffset;

    if (topPos > startPos) {
      if (elem.className.indexOf(myFixedClass)== -1) {
        if (elem.className != '') elem.className = elem.className + ' ' + myFixedClass;
        else elem.className = myFixedClass;
      }
    } else {
      var sRegEx = new RegExp(myFixedClass, "g");
      elem.className = elem.className.replace(sRegEx,"").trim();
    }
  }
</script>

Falls Sie bereits jQuery auf Ihrer Webseite einsetzen, können Sie diese Funktionalität auch mit jQuery realisieren. Dann sieht der Code deutlich übersichtlicher aus und um die Abwärtskompatibilität müssen Sie sich auch nicht kümmern. Nachteil ist natürlich, dass für das jQuery-Framework ein zusätzlicher Request notwendig ist, der natürlich zu Lasten der Performance geht und das Ladevolumen der Webseite erhöht. Deshalb würde ich für dieses Feature nur auf die jQuery-Variante zurückgreifen, wenn jQuery sowieso schon für andere Features auf der Webseite verwendet wird.

<script type="text/javascript">
  var startPos;

  $(document).ready(function(){
    window.scrollTo(0,0);
    startPos = $("nav").offset().top;
  });

  $(window).scroll(function(){
    if ($(document).scrollTop()>startPos) {
      $( "nav" ).addClass('fixed-navi');
    } else {
      if ($( "nav" ).hasClass( 'fixed-navi' )){
        $( "nav" ).removeClass('fixed-navi');
      }
    }
  });
</script>

Praxisbeispiel des scroll / fixed Headers

Im Ergebnis reagiert die Webseite wie folgt:

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

84