Angular ui-utils scrollfix

Question

Chciałem użyć ui-Utils module: scrollfix, aby mieć <div> na początku przy 100px, a jeśli przewińę w dół, powinno być ustalone na 0px.

<div ui-scrollfix="+100">test</div> 

Na stronie demo scrollfix jest hintbox, który mówi:

Pamiętaj, że dyrektywa ta dodaje tylko klasę ui-scrollfix do elementu. Od Ciebie zależy, czy dodasz odpowiednie reguły CSS, ale także dodasz inne reguły, jeśli wolisz.

Nawet tam, na stronie demo, to naprawdę nie działa ... Albo oczekuję czegoś złego.

Answer 1

Jak wspomniano wskazówkę na stronie demo scrollfix mówi:

Pamiętaj, że dyrektywa ta dodaje tylko klasę ui-scrollfix do elementu. Od Ciebie zależy, czy dodasz odpowiednie reguły CSS, ale także dodasz inne reguły, jeśli wolisz.

Zatem dyrektywa ta działa w taki sposób, że jedna klasa CSS ui-scrollfix jest dodany do elementu, gdy osiąga się stan przewijania, a klasa jest usuwany w innym przypadku (podczas przewijania do tyłu do góry). W związku z tym obowiązkiem użytkownika jest dodanie odpowiedniego stylu CSS.

Można to osiągnąć, dodając do elementu inny element lub identyfikator CSS i definiując odpowiedni styl CSS dla dwóch przypadków - normalny i stały podczas przewijania w dół. Na przykład, można mieć coś takiego w was kodu:

<div ui-scrollfix="+100" class="yourclass">test</div> 

może to być dowolny stylistyka zastosowana w tym normalnego stanu:

.yourclass { 
    /* your CSS code, 100px from the top of the page */ 
} 

Kiedy ui-scrollfix pożary stan (w tym przypadku mamy ustaw go na +100, więc gdy przewijanie strony zniknie po Twoim elemencie 100px, twój element <div> zostanie dodany do innej klasy:

<div ui-scrollfix="+100" class="yourclass ui-scrollfix">test</div> 

Można to wykorzystać, aby ustawić właściwą stylistykę CSS:

.yourclass.ui-scrollfix { 
    position:fixed; 
    top:0; 
} 

Here is a demo który korzysta z dyrektywy na górnym pasku nawigacyjnym, który jest pozycjonowany bezwzględnie 100px od górnej części strony, a podczas przewijania w dół pozostaje naprawione na górze strony. Podobnie druga (pod tytułem "Drugi pasek nawigacyjny") znajduje się pod górną. Kod CSS używam na górnym pasku jest:

.navbar-fixed-top { 
    position:absolute; 
    top:100px; 
} 

.navbar-fixed-top.ui-scrollfix { 
    position: fixed; 
    top:0; 
} 

Także myślę, że ważne jest, aby wspomnieć, że ui-scrollfix="+100" oznacza, że ​​klasa ui-scrollfix zostanie dodany do elementu, gdy górna część zwojów rzutni 100px po element. Jeśli chcesz, aby element uzyskał klasę CSS ui-scrollfix po osiągnięciu górnej krawędzi ekranu, możesz dodać ui-scrollfix="+0".

Mam nadzieję, że to pomoże.

Answer 2

Czy ustawiłeś odpowiednie css? Wiem, że musisz ustawić klasę dla ui-scrollfix.

Answer 3

** oto plunker jeśli to łatwiejsze :) ** http://run.plnkr.co/plunks/FN4s5U9JEFG1VXzy7azQ/

1. Upewnij kątowa jest bootstrapped i działa;

   1. Przejdź do następującego adresu URL, aby uzyskać JS: https://github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/scrollfix.js

   2. taśmy dyrektyw z obiektu modułu i zapisać je do własnego modułu, który jest już boostrapped (w HTML: ng-app = „sampleApp”/w JS: sampleApp.directive (...)

   3. wklej następujący HTML jako elementy podrzędne elementu zostały umieszczone dyrektywę ng aplikacji na :(musiał napisać link do ostry przejdź przez stos) https: \ // github.com/angular-ui/ui-utils/blob/master/modules/scrollfix/demo/index.html

2. wklej następujące style elementu liniowego w html po prostu umieścić w miejscu (inline styl jest właśnie dla przykładowych celów):

   .ui-scrollfix { background: green; szerokość: 100%; pozycja: naprawiona; początek: 0; w lewo: 0; }

6. ENJOY STAŁY ZŁĄCZE (elementy będą wyglądać modny dlatego, że stanowisko zastosowano: przymocowany do dwóch z nich, ale to tylko po to żeby Ci uruchomiony)