Sticky Navigation – Axure 6.5 Tutorial

Sticky Navigation – bis zu  Axure Version 7 war es ein ziemlich trickreiches Unterfangen Elemente die mitscrollen bei erreichen einer gewissen Scrolltiefe „sticky“ werden zu lassen. Am Beispiel einer sticky Navigation möchte ich kurz die Möglichkeiten aufzeigen.

Die Ausgangssituation: Das Verhalten der Navigation beim Scrollen auf der Seite http://oneplus.net/de/one will ich in Axure nachbauen. D.h. zu Anfang scrollt die Seitennavigation mit und wird bei erreichen einer gewissen Scrolltiefe an den oberen Browserrand angeheftet.

Sticky Navigation – Axure Version 6.5

Axure 6.5 bringt keinerlei Werkzeug mit sich mit dem man messen kann wie weit ein Nutzer eines Prototypen nach unten gescrollt hat. Schlechte Vorraussetzungen für eine sticky Navigation die erst ab einer gewissen Scrolltiefe angeheftet werden soll. Es gibt allerdings eine Funktion mit der man auslesen kann ob sich die Fläche eines Elements über einem anderen befindet. Diese Funktion können wir nutzen, um die Überlagerung zu überwachen benötigt man ein dauerhaft feuerndes Event, welches Rückmeldung gibt ob sich die Flächen überlagern, auch dies ist in Axure 6.5 von Haus aus nicht verfügbar.

Schritt 1: Einteilung der Seite für die unterschiedlichen Zustände der Sticky Navigation

Um die zwei Bereiche zu definieren in denen die Navigation sich unterschiedlich verhält, scroll mit und bleibt am oberen Bildschirmrand stehen, habe ich zwei schmale Balken (Shape) angelegt (rote Pfeile). Den oberen habe ich „top“ (1) genannt, den unteren „down“ (2) 🙂 Beide Elemente habe habe ich auf unsichtbar gesetzt.

seitenbereiche

Schritt 2: Element für Überwachungsfunktion integrieren

Das überwachen der Scrolltiefe realisiere ich mit einem leeren „Dynamic Panel“ am oberen Rand der Seite (3). Dynamic Panel deshalb, weil man in Axure nur Dynamic Panel „Sticky“ machen kann. Diesem Dynamic Panel gebe ich den Namen „ScrollChecker“ und auch dieses Element setze ich auf unsichtbar.

Schritt 3: Der ScrollChecker

Um den ScrollChecker dauerhaft Prüfen zu lassen ob gescrollt wird gebe ich dem Dynamic Panel OnShow eine Schleife (Loop) mit der ihn immer wieder einblendet und ausblendet.

if  true erreicht man, indem man als Condition folgendes formuliert

 Schritt 4: Starten der Überwachungsfunktion beim Aufruf der Seite

OnPageLoad starte ich den ScrollChecker in dem ich das Dynamic Panel auf „Show“ setze (4).

onpageload

Schritt 5: Funktion des ScrollChecker

Jetzt muss der ScrollChecker nur noch wissen bei welcher Scrolltiefe er welche Aktion auslösen soll. Zuvor muss ich aber noch die Navigation selbst definieren. Dies muss ebenfalls als Dynamic Panel geschehen.

navigation-dyn-panel

In Navigation State 1 lege ich noch ein Dynamic Panel an, nämlich die Navigation an die mitscrollt. In Navigation State 2 lege ich ein weiteres Dynamic Panel an, die Sticky Navigation. Das Dynamic Panel in State 2 wird per „Pin to Browser“ sticky.

Mit der Condition If area of überprüfe ich wo sich der Scrollchecker gerade befindet und welcher Zustand der Navigation gerade gezeigt werden muss.

Hier gibt’s das Ergebnis als Download: Sticky Navigation

In Axure 7 geht das sehr viel einfacher, mehr dazu findest du hier: Sticky Navigation – Axure 7 Tutorial

 

 

Alexander Schramm

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.