レスポンシブスクロールスティッキーメニューを作成しようとしています

Question

Dreamweaverでレスポンシブウェブサイトを作成しようとしていますが、ヘッダーとメニューは最初にスクロールしてページの上部に固執します。

ヘッダーとメニューは固定ヒーローイメージの上をスクロールする必要があります。 このヒーローイメージは、一定時間後にイメージを変更するためにflexsliderスクリプトによって動かされるため、バックグラウンドとして定義することはできません。

また、スティッキーヘッダーが、ページの上部に達すると高さが低くなり、画面のスペースを減らすことができます。

私はいくつかのスティッキーメニューの例をオンラインで見つけましたが、メニューのすぐ下にあるコンテンツが画面の上部に貼り付いたところで消えてしまう厄介な特徴があります。私はこれを避けたいと思います。

Please find a Mock-up of what I'm looking for here

明らかに、上記の全ては、モバイルデバイス上許容されないであろう。 携帯電話の場合、ヘッダーは途中でスクロールして、ハンバーガースタイルのメニューを画面の上部に固定したままにする必要があります。

私は、私が必要とする要素でオンラインでいくつかの例を見いだしましたが、それでもすべてを組み合わせたものはありません。 さまざまなソースからコードを切り貼りしてみましたが、目的の効果はまだ達成されていません。

私が求めているものが実行可能かどうかはわかりませんが、誰かが私にこれを達成する方法の例（または私が探しているものを改善する方法）の例を指摘できたらうれしいです。

おかげ

ニール・ホワイト

Answer 1

これを使用して

http://stickyjs.com/

をJSそれはクラスがある-スティッキーあなたがトップに固執したかった要素に追加されます。だからあなたはis-stickyクラスのCSSの高さを追加することができます。それは、あなたの要求に従って頂点に達するとき、要素の高さを減らすか、または増加させるという言い方をします。