Nachdem ich frisch mit dieser Seite gestartet hatte, staunte ich nicht schlecht über die Möglichkeiten, die sich bieten und über eine Sache bin ich recht schnell gestolpert: Die am oberen Bildschirmrand fixierte Menüleiste, die so nie aus dem Blickfeld gerät. Das wollte ich für mein Medienjournal nun verständlicherweise auch haben, doch ist diese Funktion in dem dortigen Theme leider nicht integriert oder vorgesehen, weshalb ich mir selbst behelfen musste.

Und wenn ich schon eine weitere Seite aus dem Boden stampfe, in der ich mich vollmundig als WordPress-Enthusiasten bezeichne, liegt ja eigentlich nichts näher, als direkt mit einem Workaround zu starten, der erklärt, wie man seine WordPress-Menüleiste oben fixiert, speziell, wenn darüber noch ein Header liegt, der allerdings beim Scrollen, anders als das Menü, verschwinden soll, denn das ist leider allein mit Einsatz von CSS nicht zu realisieren.

Wie immer gilt, dass man vorsichtig sein sollte, wenn man am Quellcode rumpfuscht und am besten speichert ihr euch vorher die fraglichen Dateien ab, damit ihr sie notfalls per FTP wieder aufspielen könnt, sollte etwas schiefgehen.

Zunächst einmal ergänzen wir die style.css um folgende Klasse: 

.docked{
max-width:960px;
display:block;
margin-right: auto;
margin-left: auto;
background:#f1f1f1;
padding: 3px 0 3px 0;
border-color:#5E5E5E;
border-bottom-width:2px;
border-bottom-style:solid;
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

Das sieht jetzt schlimm aus, doch die überwiegende Zahl der Attribute benötigt ihr nicht unbedingt, so allerdings erzielt ihr das Ergebnis, dass es auch im Medienjournal zu sehen gibt. Ihr könnt also später ganz nach eigenem Gutdünken weitere Anpassungen vornehmen.

Weiter geht es mit der header.php, wo wir innerhalb des <head>-Bereiches folgendes Javascript implementieren:

<script>
<!--

/*
* Sticky Content script
* Created: Sept 14th, 2011 by DynamicDrive.com. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

(function ($){

	$.fn.stickyit=function(options){
		
		var o=$.extend({}, {throttle:30, gap:0, stopstickyafter:0}, options)

		return this.each(function(){
			var $el=$(this)
 			// clone element to be sticky and make "fix" its position on the page 
			var $elclone=$el.clone(true).css({
				position:'fixed', top:o.gap, width:$el.width("100%"), height:$el.height(), margin:0
			}).appendTo(".content")

			// function to throttle the sticking of an element for performance reasons
			function throttlesticky(){
				clearTimeout(o.throttletimer)
				o.throttletimer=setTimeout(function(){stickit(o, $el, $elclone)}, o.throttle)
			}

			$(window).bind('scroll resize', throttlesticky)

			// Disable sticky after x milliseconds?
			if (o.stopstickyafter > 0)
				setTimeout(function(){$(window).unbind('scroll resize', throttlesticky); stickit(o, $el, $elclone, true)}, o.stopstickyafter)
		})

		function stickit(o, $el, $elclone, unstick){
			var docscrolltop=$(document).scrollTop()
			if (!unstick && $el.data('state')!='hidden' && docscrolltop > $el.offset().top){ // stick content if document is scrolled past top of sticky element
				$el.css({visibility:'hidden'}).data('state', 'hidden')
				$elclone.css({visibility:'visible'})
				if (typeof o.stickyclass != "undefined")
					$elclone.addClass(o.stickyclass)
			}
			else if (unstick || ($el.data('state')!='visible' && docscrolltop < $el.offset().top)){ // unstick content if not
				$el.css({visibility:'visible'}).data('state', 'visible')
				$elclone.css({visibility:'hidden'})
				if (typeof o.stickyclass != "undefined")
					$elclone.removeClass(o.stickyclass)			
			}
		}

	}

})(jQuery);
-->
</script> 

<script>

//initialize sticky content:

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

  $('#sticky').stickyit({
		gap: 0,
		stickyclass: "docked"
	})

})

</script>

Dieses Skript ist es, das bewirkt, dass am Ende das Menu beim Runterscrollen oben fixiert bleibt und ganz am Ende seht ihr, wie die im CSS hinterlegte Klasse docked angesprochen wird. Im selben Absatz findet sich auch die ID #sticky, die es noch der Navigation hinzuzufügen gilt.

Wir bleiben also in der header.php und begeben uns auf die Suche nach dem eigentlichen Menü. In meinem Fall sieht das Ganze so aus und ich habe einfach den Verweis auf die ID sticky nachgepflegt. 

		</header>
		<div class="container">
		<div id="sticky" class="secondary-navigation">
				<nav id="navigation" >

Daumen drücken, abspeichern, aktualisieren und schon sollte euer Menü am oberen Rand fixiert bleiben, während der darüber befindliche Header-Bereich beim Scrollen verschwindet. Bleibt euch nur noch, die CSS-Angaben der definierten Klasse zu individualisieren und schon seid ihr fertig!

Ich hoffe ich habe mich verständlich ausgedrückt und kann mit dieser Anleitung dem einen oder anderen helfen. Natürlich freue ich mich über Kommentare, Anmerkungen und Kritik und werde mich, sollte es bei euch nicht auf Anhieb klappen, auch gerne bemühen, euch mit Rat und Tat zur Seite zu stehen.