Chukki.de - Der Tumblr-Blog über Webdesign, Wordpress, Social Media, Cloud und Webentwicklung

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.

Andere interessante Posts...

11 Kommentare zu "jQuery: floating Menü"

Raphael Steinmann schrieb am 15. Juli 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 schrieb am 15. Juli 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 schrieb am 15. Juli 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 schrieb am 24. August 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 schrieb am 31. August 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 schrieb am 31. August 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 schrieb am 31. August 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 schrieb am 31. August 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 schrieb am 31. August 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 schrieb am 1. September um 11:41 Uhr:

Ok, habe es jetzt hinbekommen.

Danke
Gruß
Robin

MARTIN schrieb am 13. September 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

Kommentar schreiben