jQuery: floating Menü

Sie scheinen zurzeit der große Trend zu sein: floating Menüs – also Menüs oder Interface-Elemente, die mit den Interaktionen des Users „mitfliegen“. So hat z.B. Google in GMail vor ein paar Tagen diese Funktion eingebaut und dadurch das Bearbeiten der Mails deutlich erleichtert. So wird interaktives Design geschaffen und mit einer leichten Funktion der Nutzwert von Applikationen enorm erhöht.

Weitere Einssatzzwecke dieser Funktion sind z.B. Social Media Buttons: Wer einen hohen Wert auf diese Buttons legt, könnte sie rein theoretisch mit dem Benutzer beim Lesen mitfliegen lassen – so dass der User jederzeit die Möglichkeit hat die Buttons während des Lesens aufzufinden und den Beitrag zu teilen.

Ich habe das floating Menü (oder auch floating DIV) gestern hier auf Chukki.de eingebaut, wenn der User nun nach unten Scrollt bleiben ihm trotzdem die wichtigsten Funktionen erhalten – das Menü, die Suche und die Social Media Links. Auf einer Seite wie Chukki.de nicht unbedingt wichtig für ein gutes User Interface, aber ein Beispiel dafür wie man mit jQuery den Nutzwert einer Seite doch sehr leicht erhöhen kann.

HTML

...

<div id="float">Fliegender Content</div>

...

CSS

#float{width:300px; height:300px; background:red;}
.fixed{position:fixed; top:0; width:100%; z-index:100000000000;}

jQuery

$(document).ready(function () {
    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        var top = 163; 
        if (y >= top) {
            $('#float').addClass('fixed');
        } else {
            $('#float').removeClass('fixed');
        }
    });
});

Im Prinzip ganz einfach: jQuery soll bei dem Event „Scroll“ schauen auf welcher Höhe sich der User befindet. Mit der Variable „top“ wird festgelegt ab welcher Höhe gescrollt werden soll – ist nun der User oberhalb dieses Wertes (also der Abstand nach oben hin größer als in „top“ festgelegt), wird dem DIV Container „float“ die CSS Klasse „fixed“ zugewiesen. Per CSS teilen wir nun mit das die Position „fixed“ sein soll, also feststehend – dadurch schwebt die Box mit dem User mit.

Ist der Benutzer nun wieder unterhalb des in „top“ festgelegten Wertes wird die Klasse „fixed“ wieder entfernt und der DIV Container verhält sich ganz normal wie man es gewöhnt ist.

Andre Teich

arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

14 Kommentare zu "jQuery: floating Menü"

Raphael Steinmann 15. Jul 2011 um 08:36 Uhr

Grüß dich Andre,

ein netter Beitrag zu dem Float-Menu!

Mir ist gerade als User von Google Chrome 12 (unter Windows 7, 64 Bit) aufgefallen, dass dein Floating-Menu bei mir nicht mitscrollt. Habe das dann direkt mal mit Firefox 4, IE 9 und Google Chrome 14 (Beta) probiert. Dort funktioniert es einwandfrei. (Das ist nur als kleiner Bugreport gedacht)

In letzter Zeit ist Chrome sehr anfällig für Fehler geworden habe ich das Gefühl. Ärgerlich sowas, da es doch ein Webkit-Browser ist.

Wie dem auch sei. Ich finde Floating auch sehr praktisch und setze es gelegentlich, vor allem bei WebApps ein. Richtig eingesetzt erhöht es die Usability enorm!

Viele Grüße,
Raphael

Raphael Steinmann 15. Jul 2011 um 08:48 Uhr

Hallo nochmal Andre,

der vorherige Post war eine Falschmeldung. Habe Chrome gerade upgedatet und nun geht es ;-) War also entweder das Update, oder der Browsercache, wollte das JavaScript nicht aktualisieren. Bevor du dich also auf die Sucher begibst, es läuft alles perfekt! ;-)

Andre 15. Jul 2011 um 08:50 Uhr

Ja wenn ich das aber richtig betrachte müsste dies ja dann ein Problem von jQuery sein. jQuery sollte ja eigentlich dafür sorgen, das solche Dinge Browserübergreifend funktionieren – dafür sind Frameworks ja da. Ich nutze auch Chrome 12 auf dem Mac und habe dort alles einwandfrei getestet. Trotzdem danke ich dir. :)

ff-webdesigner 24. Aug 2011 um 11:57 Uhr

Floating Menus sind was feines. Negativ fällt mir einzig die Reduktion des Viewports auf, also sollten solche menus von der Höhe her immer stark beschränkt sein

Robin 31. Aug 2011 um 14:37 Uhr

Hallo,
finde den Effekt auch sehr cool und will ihn nun auf meiner Website einbauen. Das Problem ist nur dass es nicht funktioniert. Kann mir jemand helfen?

Danke Gruß
Robin

Andre 31. Aug 2011 um 14:40 Uhr

Hi Robin,
also wenns die Seite ist die du angegeben hast, dann solltest du diesen Fehler erstmal beseitigen „autoplay: ,“ – da muss “ autoplay: true,“ oder „autoplay: false,“ stehen – das kann zur folge haben das nachfolgende Funktionen nicht richtig funktionieren. Sollte dies nicht helfen, meld dich nochmal.

Robin 31. Aug 2011 um 14:55 Uhr

Hi, nein das ist nicht die Seite, die Seite ist es: http://joomla1.6.feuerwehr-heddesheim.de/

also der rote Kasten ist jetzt das was ich von der Seite hier kopiert habe. Aber es funktioniert nicht.

Gruß
Robin

Andre 31. Aug 2011 um 14:59 Uhr

Du hast mootools eingebunden, das Script von mir ist aber für jQuery

Fehler: $(document).ready is not a function
Quelldatei: http://joomla1.6.feuerwehr-heddesheim.de/
Zeile: 20

Dadurch dieser Fehler…

Robin Birr 31. Aug 2011 um 15:04 Uhr

mmh, ok. Die Seite ist mit Joomla gemacht und da scheint mootools schon eingebunden zu sein automatisch. Kann ich das irgendwie ändern dass es funktioniert?

Danke

Robin 01. Sep 2011 um 11:41 Uhr

Ok, habe es jetzt hinbekommen.

Danke
Gruß
Robin

MARTIN 13. Sep 2011 um 17:44 Uhr

Hallo,
vielen dank für das kleine Tutorial! Das JQuery hat mir wirklich weiter geholfen! Es funktioniert auch einwandfrei, nur hätte ich gerne, dass das Div ab einem bestimmten Punkt aufhört mit zu scrollen und an der Position stehen bleibt, da es sonst in meinen Footer reinscrollt. Kann mir da jemand weiterhelfen? Wär echt super! Danke!
LG
Martin

Philip 29. Feb 2012 um 21:54 Uhr

Vielen Dank – super Anleitung, genau was ich gesucht habe!

Robin 31. Mrz 2012 um 12:07 Uhr

Hallo,
ich habe ein Problem. Bei mir rutscht der Content wenn ich scrolle immer ganz nach oben an den Browserrand.

Hier die Seite: http://neu.feuerwehr-heddesheim.de/

Thomas 21. Aug 2014 um 11:11 Uhr

Super Anleitung und sehr viel einfacher, als die Kollegen im Netz es sonst so beschreiben. Hatte schon die Befürchtung, ich müsste hardcore coden, um so ein Menü zu erhalten. Vielen Dank für’s Teilen!
Thomas

Kommentar schreiben