位置：スティッキー：要素が切り離されたときに、通常の流れからスタイルを追加

Question

は、簡単な例を取る見てみましょう：

<nav id="#mynav">MY NAVBAR</nav> 

と基本的なスタイル：

#mynav { 
    position : sticky; 
} 

私は、次のスタイルを適用したいと思います情報を私のナビゲーションバーに通常の流れから外すと、それは目に見えるようにメインコンテンツ（この場合は影付き）から分割されます

box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75); 

私はそれに使用できる疑似クラスまたはメディアクエリのようなものがありますか？例えば：

#mynav:some-pseudo-class { 
    box-shadow : 0px 10px 15px 0px rgba(0,0,0,0.75); 
} 

私は、このための良いプラグインがある知っているが、それらのすべてが（かなり新しい）ネイティブ機能position:stickyをバイパスwhithoutそれを実装することができないように見えます。代わりに、彼らは古い方法（スクロールイベント、およびposition:fixed; top:0）でそれを行います。

を使用し、scrollイベントを使用せずに、ページの流動性を低下させる可能性はありますか（私はJavaScriptとは異なりますが、スクロールイベントは遅すぎます）。

Answer 1

残念ながら、私が知る限り、「スティッキー」状態をターゲットとする疑似クラスはありません。

はポストを参照してください：Targeting position:sticky elements that are currently in a 'stuck' state

代替は、それがstickiedする必要のある要素に到達すると、クラス/ CSSスタイルを追加または削除するにはjQueryのを使用することです。

編集：

別の注意： 'position：sticky;'クロスブラウザのサポートが低いため、お勧めしません。 http://caniuse.com/#search=stickyを参照してください。この場合、jQueryを使用する方が良いでしょう:-)

Answer 2

JavaScriptスクロールイベントには、おそらく最適な解決策があります。 CSSはスナップポイントをサポートしていますが、これはスクロールイベントのサポートに最も近いものです。

JSソリューションの唯一の問題が流動性である場合は、#mynavにCSSトランジションを適用して、スクロールで要素が変更されたときに、何かが変化していることを視覚的にスムーズにすることをお勧めします。