Zdarzenie, gdy pozycja: aktywacja jest aktywowana

Question

Używam nowego position: sticky (info), aby utworzyć listę zawartości typu iOS.

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.

Answer 1

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.

Answer 2

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.

Answer 3

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) :)

Answer 4

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