位置事件：粘性觸發

我正在使用新的position: sticky（info）創建類似iOS的內容列表。位置事件：粘性觸發

它運行良好，遠遠優於以前的JavaScript替代方案（example），但據我所知，當觸發事件時不會觸發事件，這意味着當條打到頁面頂部時我無法做任何事情，不像以前的解決方案。

當position: sticky的元素碰到頁面的頂部時，我想添加一個類（例如stuck）。有沒有辦法用JavaScript來聽這個？ jQuery的用法很好。

使用中的新position: sticky的演示可以在here找到。

來源

2013-04-30 AlecRust

這很有趣，因爲那篇文章最精彩的評論正好解決您的問題。這傢伙得到了發現，這應該是一個媒體查詢，而不是一個財產。這樣，當元素卡住時（我們經常這樣做），您可以改變樣式。哦，一個人可以做夢。 – 2013-04-30 16:44:11

是的，我注意到這個評論，他的提議似乎好得多。不過，「位置：粘性」是Chrome實施的，所以我正在尋找一種可用的方式！ – AlecRust 2013-04-30 16:46:25

您是否找到解決方案？ – 2014-04-16 15:29:32

在Chrome添加position: sticky之後，發現它是not ready enough和relegated to to --enable-experimental-webkit-features flag。保羅愛爾蘭said in February「功能是在一個怪異的狀態atm」。

我正在使用the polyfill，直到它變得非常頭痛。它可以很好地工作，但有一些角落案例，比如CORS問題，並且通過爲所有CSS鏈接執行XHR請求並重新解析瀏覽器忽略的「position：sticky」聲明，從而減緩頁面加載速度。

現在我正在使用ScrollToFixed，我比StickyJS更好，因爲它不會使用包裝搞亂我的佈局。

來源

2013-05-01 14:59:22 Turadg

目前沒有本地解決方案。見Targeting position:sticky elements that are currently in a 'stuck' state。不過，我有一個CoffeeScript解決方案，可以與本地position: sticky以及實現粘性行爲的polyfills一起使用。

添加「粘性」類元素，你想成爲粘性：

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

CoffeeScript的監視「粘」元素的位置，並添加「堅持」上課的時候，他們是在「粘性」狀態：

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

注意：此代碼僅適用於垂直粘滯位置。

來源

2014-10-03 19:22:01

我知道這個問題已經有一段時間了，但我找到了一個很好的解決方案。插件stickybits在受支持的情況下使用position: sticky，並在元素被「卡住」時將類應用於該元素。我最近用它得到了很好的結果，並且在撰寫本文時，它是積極的開發（對我來說這是一個積極的發展）:)

來源

2017-07-27 09:14:30 Davey

Stickybits的一個疑難問題是，我發現當其他js正在監聽滾動事件時，它不會很出色。這些問題只有在我不支持'position：sticky'（ie11，edge）的瀏覽器中測試時纔會顯現出來。 – Davey 2017-08-31 08:04:31

這個lib是bug ********* – VSG24 2017-09-02 22:07:12

如果有人通過Google來到這裏，他們自己的工程師有一個解決方案IntersectionObserver，自定義事件，並哨兵：

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

來源

2017-10-02 18:00:10

這是一個解釋不好的答案，但是，如果用戶可以使用僅限Chrome的解決方案，該鏈接將顯示對此問題的非常好的答案。 – wdanda 2017-10-31 17:54:00

使用JavaScript。我們需要純粹的CSS方法。 – Green 2018-02-01 07:26:13

位置事件：粘性觸發

回答

相關問題