5202

ein Blog über technische Fragen zu Blogger

Blogger: Menü-Gadget 'sticky' fixieren

von
'Sticky' [=klebrig] meint ein HTML Element, das bis zu einem bestimmten Punkt auf der Seite mitscrollt und dann irgendwo 'festklebt' - etwa unterhalb der Blog-Oberkante.

Falls ihr euch nichts darunter vorstellen könnt, schaut euch meine Skizze an - die 'Sidebar' scrollt mit und bleibt dann 'hängen'.

Effekt

Den Effekt habt ihr bestimmt schon öfters gesehen und wenn das für einen Besucher tatsächlich Mehrwert bietet, macht das richtig was her. Oft erlebe ich das aber als 'L’art-pour-l’art', das also auf einer Seite wild irgendwelche Elemente mitscrollen und dann wieder festkleben und so was nervt tierisch ... zumindest mich :)!

Überlegt euch also vorher, welche wichtigen Blog-Elemente eure Besucher immer im Blick haben sollen und daran könnt ihr euch austoben ... in 99% der Fälle wird das wohl das Menü sein, also schreibe ich heute darüber.

Obwohl eigentlich nichts schief gehen kann, probiert das trotzdem zuerst in einem Test-Blog aus!

jQuery

Für den 'sticky' Effekt gibt es unzählige fertige jQuery Scripte von sehr einfach bis hochkomplex - die Grundfunktion ist aber immer die gleiche:

Es wird bei einem Scroll-Ereignis [=wenn ihr scrollt] die Höhe eines Elements zur oberen Browserkante gemessen und wenn die eine bestimmte Mindesthöhe unterschreitet, wird dem 'klebrigen' Element eine neue Klasse class='sticky' gegeben.

Ein universales 'Sticky'-Script könnte nun so ausschauen (dieses Script ist nur ein Beispiel):
<script type='text/javascript'>
//<![CDATA[
   $(window).scroll(function(){ 
  var offset = 0;
  var sticky = false;
  var top = $(window).scrollTop();
  
  if ($(".demo_content ").offset().top < top) {
   $("#sticky").addClass("sticky");
   sticky = true;
  } else {
   $("#sticky").removeClass("sticky");
  }
 });
//]]>
</script>
Wenn das 'klebrige' Element die Höhe '0' erreicht, bekommt es die Klasse sticky. Die 'Fixierung' geschieht nun simpel und einfach mit CSS:
.sticky {
  position: fixed;
  top: 0;
}
Problem
Das Script tut was es soll, siehe mein jQuery Beispiel.

Das Problem dabei ist, dass ein 'scroll' Ereignis für eine Funktion ziemlich auf die Performance vom Browser geht. Alle modernen Desktop-Browser benützen Javascript Beschleunigung und da werdet ihr keinen großen Hänger erleben - aber schaut euch die Skizze mal auf dem iPad an, da hängt die Sidebar etwa 0.2s hinter dem scrollen zurück.

Conclusio: jQuery ist für einen 'sticky' Effekt bestenfalls eine Übergangslösung.

CSS

Begrüßenswerter Weise hat die W3C darüber nachgedacht und hat eine neue CSS3-Eigenschaft position: sticky kreiert, die genau das macht, was das ich oben mit dem Script gemacht habe.

Um zu demonstrieren, wie gut das funktioniert, habe ich eine reine CSS Skizze gebaut ... aber:

Die CSS Eigenschaft position: sticky funktioniert bis jetzt nur im Chrome Browser und ihr müsst sie manuel aktivieren:

A) Dazu öffnet ihr einen neuen Tab in Chrome

B) Ihr tippt in die URL Leiste chrome://flags oder klickt den Link

C) Ihr aktiviert den Punkt Experimentelle WebKit-Funktionen aktivieren

D) Um die Änderung anzuwenden, müsst ihr die Seite neu laden.


Jetzt könnt ihr in der Skizze den 'sticky' Header sehe ... ohne die Aktivierung läuft der Header einfach so mit durch die Seite.

Anwendung
Die Skizze ist sehr simpel aufgebaut - der Überschrift habe ich folgende CSS gegeben:
.sticky {
  position: -webkit-sticky;
     position: -moz-sticky;
      position: -ms-sticky;
       position: -o-sticky;
  top: 0px;
  z-index: 10
Nichts ist perfekt im Leben ... die Eigenschaft position: sticky wird z.Z. nur vom Chrome Browser unterstützt und die anderen Browser werden das sicher peu à peu einführen ... wird aber wohl sechs Monate oder länger dauern.

Wenn das dann irgendwann mal von den großen Browsern unterstützt wird, würde ich ein 'sticky' Element imner mitt CSS machen. Wenn ihr mal meine CSS-Skizze mit meiner jQuery-Skizze vergleicht, werdet ihr sehen, wie 'smoother' die Seite mit CSS scrollt.

Ähm ... kommen wir zurück zum Thema

Okay, ich quatsch euch voll und eigentlich ging's ja um 'Menü-Gadget 'sticky' fixieren' ... kommen wir zurück zum Thema ... wie funktioniert das nun?
jQuery Script
Für ein Blogger Standard Layout nehmt ihr dieses Script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
   $(window).scroll(function(){ 
  var offset = 0;
  var sticky = false;
  var top = $(window).scrollTop();
  
  if ($("#crosscol").offset().top < top) {
   $("#PageList1").addClass("sticky");
   sticky = true;
  } else {
   $("#PageList1").removeClass("sticky");
  }
 });
//]]>
</script>
Ihr packt dieses Script in ein HTML/Java Gadget und platziert das Gadget irgendwo im Blog (möglichst tief ist gut).
CSS
Im Vorlagen Designer packt ihr anschließend diese CSS:
.sticky {
  position: fixed;
  width: 800px;
  top: 0;
  z-index: 10;
}
Die Breite 800px entspricht dabei der Blogbreite und die müsst ihr manuell anpassen ... ansonsten wird das Menü im 'klebrigen' Zustand kleiner oder größer als im Ausgangszustand.

Probiert's aus ... das Seiten-Gadget srollt ab jetzt bis zur Browseroberkante mit und bleibt dann hängen.

Sidebar

Ihr könnt damit natürlich auch eure Sidebar oder jedes andere Blogelement 'sticky' fixieren ... ist nur a bisserl schwieriger.

Für die Sidebar werde ich einen extra Post machen und dort etwas völlig neues ausprobieren ... stay tuned ... irgendwann nächste Woche, hier auf diesem Blog!

Kommentare

Falls das wieder erwarten in irgendeinem Browser Probleme macht oder sonst wie nicht klappt, gebt Bescheid.