jQuery Waypoints

Znalazłem ostatnio ciekawy plugin do jQuery – Waypoints. Dzięki niemu możemy podpiąć się pod takie zdarzenia jak pojawienie się danego elementu w widocznej części przeglądarki.

Wykorzystałem go w portfolio dla przyjaciółki Karoliny Witeckiej, działanie można obejrzeć po kliknięciu piktogramu
Panel z kontrolnymi piktogramami przeskoczy na prawo, będzie wyrównany z górną częścią pierwszego zdjęcia* i w trakcie scrollowania w dół przyklei się do górnej krawędzi viewport przeglądarki.

Jeśli będziecie zaglądać do źródła, żeby się przekonać jak to jest zrobione, to z góry wstyd mi za resztę kodu JS. Nie mam nic na swoje usprawiedliwienie (że mało czasu to nie jest przecież wymówka). Sam kod obsługujący waypoints to:

// podpięcie waypoint
controll.waypoint(function(event, direction) {
   $(this).toggleClass('unfolded-fxd', direction === "down");
   event.stopPropagation();
});
// usunięcie waypoint (po ponownym przeskoczeniu listy w tryb poziomy)
controll.waypoint("remove");

(*) W przypadku, gdy przescrollowaliśmy na tyle daleko, że po przerzuceniu panelu kontrolnego miałby się schować (waypoint się niestety nie zorientuje) zostanie on “przyklejony” ręcznie, to jest snippet, który za to odpowiada:

 if(controll.get(0).offsetTop < window.scrollY) {
   controll.addClass("unfolded-fxd");
 }

Więcej przykładów na stronie jQuery Waypoints.

Share Button

One thought on “jQuery Waypoints

Leave a Reply

Your email address will not be published. Required fields are marked *