新しいposition: sticky（info）を使用して、iOS風のコンテンツリストを作成しています。それがトリガーだとき位置：stickyがトリガーされたときのイベント
それは前回のJavaScriptの代替より良くし、はるかに優れ働いている（exampleは）しかし、私の知る限りでは何のイベントがバーがページの最上部に当たったとき、私は何もできないことを意味する、解雇されていません、以前のソリューションとは異なります。
position: stickyの要素がページの先頭に当たる場合は、クラス（例：stuck）を追加します。 JavaScriptでこれを聞く方法はありますか？ jQueryの使用は問題ありません。
新しいposition: stickyのデモは、hereです。
position: stickyを添加した後、not ready enoughおよびrelegated to to --enable-experimental-webkit-features flagであることが判明した。 Paul Irish said in February「機能は奇妙なリムボ状態atm」です。
私はthe polyfillを使用していましたが、それはあまりにも頭痛になります。それはうまく動作しますが、CORSの問題のようなコーナーケースがあり、すべてのCSSリンクのXHR要求を行い、ブラウザが無視した "position：sticky"宣言を再解析することでページの読み込みが遅くなります。
今はScrollToFixedを使用していますが、私はStickyJSよりもよく似ています。なぜなら、レイアウトにラッパーを付け加えないからです。
現在、ネイティブソリューションはありません。 Targeting position:sticky elements that are currently in a 'stuck' stateを参照してください。しかし、私は固有のposition: stickyと、スティッキーな動作を実装するポリフィルの両方で動作するCoffeeScriptソリューションを持っています。
あなたはスティッキーになりたい要素に「スティッキー」クラスを追加します。
.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)
注：このコードは、垂直のスティッキー位置でのみ機能します。
質問をしてからしばらく時間がかかっていることは知っていますが、これには良い解決策が見つかりました。プラグインstickybitsは、サポートされている場合はposition: stickyを使用し、要素が「スタック」している場合にクラスに適用します。私は最近、良い結果を出して使用しました。書いている時点では、それは積極的な開発です（これは私のためのプラスです）:)
誰かがGoogle経由で自分のエンジニアにアプローチすると、 IntersectionObserver、カスタムイベント、および歩哨：
https://developers.google.com/web/updates/2017/09/sticky-headers
その記事のトップクラスのコメントはまさにあなたの問題を解決しますので、それは面白いです。その男はそれにスポットがある、これはメディアのクエリではなく、プロパティでなければなりません。そうすれば、要素が固まったときにスタイルを変えることができます（これはしばしば行います）。ああ、男は夢を見ることができます。 –
ええ、私はそのコメントに気づいた、彼の提案ははるかに良いようです。それでも、「position：sticky」はChromeが実装したものなので、私はそれを使用可能にする方法を探しています！ – AlecRust
解決方法を見つけましたか？ –