タグ付けされた質問 「sticky」

下の画像のように、外部ライブラリを使用せずに、画面上部のヘッダービューを修正したいと思います。 私の場合、アルファベット順にしたくありません。2種類のビュー（ヘッダーと通常）があります。一番上、最後のヘッダーに固定したいだけです。

120 android  header  android-recyclerview  sticky 

私はこれに少し立ち往生していて、これとposition: stickyフレックスボックスの落とし穴を共有したいと思いました： ビューをフレックスボックスコンテナに切り替えるまで、スティッキーdivは正常に機能していましたが、フレックスボックスの親にラップされたときに突然divがスティッキーではなくなりました。 .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 問題を示すJSFiddle

106 css  flexbox  css-position  sticky 

スティッキーサイドバーの問題の解決策を探していました。私はそれをどのように行動させたいかについて具体的な考えを持っています。事実上、下にスクロールすると下にくっつき、上にスクロールするとすぐに上にくっつき、滑らかな動き（ジャンプなし）になります。私が達成しようとしていることの例を見つけることができないので、私はポイントをより明確に説明することを望む画像を作成しました： サイドバーはヘッダーの下にあります。 下にスクロールしても、サイドバーはページのコンテンツと同じ高さのままなので、サイドバーとコンテンツの両方をスクロールできます。 サイドバーの下部に到達すると、サイドバーはビューポートの下部に固定されます（ほとんどのプラグインは上部にのみ固定できますが、下部に固定できるプラグインの中には両方を使用できないものもあります）。 下部に到達すると、サイドバーはフッターの上に配置されます。 上にスクロールしても、サイドバーはコンテンツと同じ高さに保たれるため、コンテンツとサイドバーをもう一度スクロールできます。 サイドバーの上部に到達すると、サイドバーはビューポートの上部に固定されます。 上部に到達すると、サイドバーがヘッダーの下に戻ります。 これで十分な情報になるといいのですが。プラグイン/スクリプトをテストするためにjsfiddleを作成しましたが、この質問のためにリセットしました：http：//jsfiddle.net/jslucas/yr9gV/2/ .

94 jquery  position  fixed  sidebar  sticky