試圖創建一個響應式滾動粘性菜單

Question

我試圖在Dreamweaver中創建一個響應式網站，其頭部和菜單最初會滾動，然後粘貼到頁面頂部。

標題和菜單需要滾動到固定英雄圖像的頂部。 此英雄圖片無法定義爲背景，因爲它將由flexslider腳本支持，以在設定的時間後更改圖片。

我也喜歡粘滯標題，當它到達頁面頂部時可能會縮小高度，以減少佔用的屏幕空間。

我在網上發現了很多粘性菜單示例，有些似乎有令人討厭的特性，菜單直接位於屏幕頂部的位置後，菜單下方的內容消失。我想避免這一點。

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

顯然，上述所有不會在移動設備上是可接受的。 因此，對於手機來說，標題需要滾動，只留下一個漢堡包樣式菜單固定在屏幕的頂部。

我發現了一些與我需要的元素聯機的示例，但沒有結合所有東西。 我試過從不同來源切割和粘貼代碼，但尚未達到預期的效果。

我不知道我所要求的是否可行，但如果有人能指出我如何實現這個目標（或改善我所尋找的）的例子，我將不勝感激。

感謝

尼爾·懷特

Answer 1

使用這個JS

http://stickyjs.com/

它添加類粘到你想堅持到頂部的元素。所以你可以在CSS中添加高度粘性類。根據您的要求，這將在元素達到頂部時減少或增加元素的高度。