Angular ui-utils scrollfix

Wie Sie bereits erwähnt haben, lautet der Hinweis auf der Scrollfix-Demoseite:

  

Beachten Sie, dass diese Anweisung dem Element nur eine ui-scrollfix-Klasse hinzufügt. Es liegt an Ihnen, die entsprechenden CSS-Regeln hinzuzufügen. Sie können jedoch auch andere Regeln hinzufügen, wenn Sie dies bevorzugen.

Diese Anweisung funktioniert also so, dass dem Element immer dann eine einzelne CSS-Klasse ui-scrollfix hinzugefügt wird, wenn die Bildlaufbedingung erfüllt ist, und andernfalls die Klasse (wenn Sie zurück zum Anfang blättern). Daher liegt es in Ihrer Verantwortung, richtigen CSS Stil hinzuzufügen.

Sie können dies erreichen, indem Sie dem Element eine andere Klasse oder CSS-ID hinzufügen und das richtige CSS-Styling für die beiden Fälle definieren - den normalen und den festen, wenn Sie nach unten scrollen. Zum Beispiel können Sie so etwas in Ihrem Code haben:

In diesem normalen Zustand kann jeder Stil angewendet werden:

Wenn die ui-scrollfix -Bedingung ausgelöst wird (in diesem Fall haben wir sie auf +100 gesetzt, also wenn das Blättern der Seite 100px nach deinem Element gegangen ist), wird deinem <div> -Element eine weitere Klasse hinzugefügt:

Damit können Sie den richtigen CSS-Stil festlegen:

Hier ist eine Demo , die die Direktive in der oberen Navigationsleiste verwendet, die sich absolut in 100px befindet oben auf der Seite, und wenn Sie nach unten scrollen, bleibt es oben auf der Seite fixiert. Ähnlich positioniert sich der zweite (mit dem Titel "Second Navbar") unter dem obersten. Der CSS-Code, den ich für die obere Leiste verwende, ist:

Außerdem ist es wichtig zu erwähnen, dass ui-scrollfix="+100" bedeutet, dass die Klasse ui-scrollfix dem Element hinzugefügt wird, wenn der obere Teil des Ansichtsfensters nach dem Element 100px scrollt. Wenn Sie möchten, dass das Element die ui-scrollfix CSS-Klasse abruft, wenn es den oberen Teil des Ansichtsfensters erreicht, können Sie ui-scrollfix="+0" hinzufügen.

Hoffe, das hilft.

** hier ist ein Plünderer, wenn das einfacher ist :) ** Ссылка

1. Stellen Sie sicher, dass Angular bootstrapped ist und läuft;

   1. Gehen Sie zur folgenden URL, um die js: zu erhalten Ссылка

   2. Entfernen Sie die Anweisungen aus dem Modulobjekt und schreiben Sie sie in Ihr eigenes Modul, das bereits geladen ist (in html: ng-app="BeispielApp" / in js: sampleApp.directive (...)

   3. Fügen Sie die folgenden HTML-Elemente als untergeordnete Elemente des Elements ein, in das Sie die ng-app-Direktive eingefügt haben: ( musste den Link funky schreiben, um es durch Stapel zu bekommen ) https: \ // github.com/angular-ui/ui-utils/blob/master/modules/scrollix/demo/index.html

2. Fügen Sie das folgende Stilelement in das HTML ein, das Sie gerade eingefügt haben ( Inline-Stil dient nur zu Beispielzwecken ):

       .ui-scrollfix {       Hintergrund: grün;       Breite: 100%;       Position: fixiert;       oben: 0;       links: 0;     }

6. FIXED HEADER GENIESSEN (die Elemente sehen funky aus, weil du die Position angewendet hast: auf zwei davon fixiert, aber das ist nur, um dich zum Laufen zu bringen)

Haben Sie die richtige CSS eingestellt? Ich weiß, dass Sie die Klasse auch für ui-scrollfix einstellen müssen.