2013-04-30 13 views
13

Używam nowego position: sticky (info), aby utworzyć listę zawartości typu iOS.Zdarzenie, gdy pozycja: aktywacja jest aktywowana

To działa dobrze i zdecydowanie lepszy niż poprzedni alternatywa JavaScript (example) Jednakże o ile wiem, żadne zdarzenie nie jest zwolniony, gdy jest uruchomiony, co oznacza, że ​​nie może nic zrobić, gdy pasek uderza górę strony w przeciwieństwie do poprzedniego rozwiązania.

Chciałbym dodać klasę (np stuck), gdy element z position: sticky uderza górze strony. Czy istnieje sposób, aby tego słuchać za pomocą JavaScript? Korzystanie z jQuery jest w porządku.

Demo nowego position: sticky użytkowej można znaleźć here.

+0

To zabawne, bo najlepiej oceniane komentarz do tego artykułu rozwiąże problem dokładnie. Ten facet ma to na miejscu, to powinno być zapytanie o media, a nie właściwość. W ten sposób możesz zmienić style, gdy element utknie (co często robimy). No cóż, człowiek może śnić. –

+1

Tak, zauważyłem ten komentarz, jego propozycja wydaje się znacznie lepsza. Nadal jednak "position: sticky" jest implementacją Chrome, więc szukam sposobu na jej wykorzystanie! – AlecRust

+2

Czy znalazłeś rozwiązanie tego problemu? –

Odpowiedz

2

Po dodaniu Chrome position: sticky, okazało się, że jest to not ready enough i relegated to to --enable-experimental-webkit-features flag. Paul Irish said in February "Funkcja jest w dziwnym stanie stanu bankomatu".

Używałem the polyfill, aż stanie się zbyt wielkim bólem głowy. Ładnie działa, gdy jest, ale są przypadki narożne, takie jak problemy z CORS, i spowalnia ładowanie stron, wykonując żądania XHR dla wszystkich twoich linków CSS i reparując je dla deklaracji "position: sticky", że przeglądarka jest ignorowana.

Teraz używam ScrollToFixed, który podoba mi się lepiej niż StickyJS, ponieważ nie zepsuł mojego układu za pomocą otoki.

5

Obecnie nie ma natywnego rozwiązania. Zobacz Targeting position:sticky elements that are currently in a 'stuck' state. Mam jednak rozwiązanie w języku CoffeeScript, które działa zarówno z natywnym kodem position: sticky, jak i z wielokropkami, które implementują zachowanie lepkie.

Dodaj „lepkie” klasa elementów chcesz być lepki:

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    position: sticky; 
    top: 0px; 
    z-index: 1; 
} 

coffeescript monitorować „lepkie” pozycje elementów i dodać klasę „zatrzymany”, gdy są one w stan „przyczepiony”:

$ -> new StickyMonitor 

class StickyMonitor 

    SCROLL_ACTION_DELAY: 50 

    constructor: -> 
    $(window).scroll @scroll_handler if $('.sticky').length > 0 

    scroll_handler: => 
    @scroll_timer ||= setTimeout(@scroll_handler_throttled, @SCROLL_ACTION_DELAY) 

    scroll_handler_throttled: => 
    @scroll_timer = null 
    @toggle_stuck_state_for_sticky_elements() 

    toggle_stuck_state_for_sticky_elements: => 
    $('.sticky').each -> 
     $(this).toggleClass('stuck', this.getBoundingClientRect().top - parseInt($(this).css('top')) <= 1) 

UWAGA: Ten kod działa tylko w przypadku pionowej lepkiej pozycji.

1

Wiem, że minęło trochę czasu, odkąd zadano pytanie, ale znalazłem dobre rozwiązanie. Wtyczka stickybits używa position: sticky, gdzie jest obsługiwana i stosuje klasę do elementu, gdy jest "zablokowany". Używałem go niedawno z dobrymi wynikami, a w czasie pisania, to aktywny rozwój (co jest plusem dla mnie) :)

+0

Jeden gnojek z stickybitami to to, że znalazłem go nie działa znakomicie, gdy masz inne js słuchanie wydarzeń przewijania. Problemy te pojawiły się dopiero wtedy, gdy testowałem w przeglądarce, która nie obsługuje 'position: sticky' (ie11, edge). – Davey

+1

Ta biblioteka jest błędna jako **** – VSG24

0

Jeśli ktoś zjawi się poprzez Google One własnych inżynierów ma rozwiązanie używając IntersectionObserver, niestandardowe zdarzenia, a strażnicy:

https://developers.google.com/web/updates/2017/09/sticky-headers

+0

To jest źle wyjaśniona odpowiedź, jednak link pokazuje bardzo dobrą odpowiedź na to pytanie, jeśli użytkownik jest w porządku, aby użyć rozwiązania tylko chrom. – wdanda

+0

Który używa JavaScript. Potrzebujemy czystego podejścia CSS. – Green

Powiązane problemy