介紹

頁面滾動時，我們在網(wǎng)站上可以經(jīng)?？吹焦潭ㄔ陧敳康膶?dǎo)航，它保證了用戶在任何時候都可以利用頂部導(dǎo)航。

本教程的方案采用了最簡潔快速的方式，與現(xiàn)有的實現(xiàn)方法不同。它解決了頁面向下滾動時，頁面中間的導(dǎo)航的固定效果問題。（適用于web或app端）

要實現(xiàn)的功能

1.當頁面滾動到藍色內(nèi)容下方時，將顯示固定的頂部導(dǎo)航。

2.當頁面滾動到藍色內(nèi)容上方時，將隱藏固定的頂部導(dǎo)航

頁面內(nèi)容制作

首先設(shè)置頁面樣式以使頁面內(nèi)容左對齊。

元件制作

1.首先制作頂部導(dǎo)航，然后在它下面制作一個灰色矩形代表內(nèi)容。復(fù)制一個頂部導(dǎo)航，移動到中部，然后在它下面制作一個藍色矩形代表內(nèi)容。

2.將中間的導(dǎo)航欄制作成動態(tài)面板，并命名為滾動欄。

3.復(fù)制頂部導(dǎo)航并將其轉(zhuǎn)換為動態(tài)面板。然后將其固定在瀏覽器的左上角，并將其命名為固定欄。

4.拖動一個熱區(qū)并將其轉(zhuǎn)換為一個動態(tài)面板，名為頂部熱區(qū)，并固定在瀏覽器的左上角。

5.拖動一個熱區(qū)并將其覆蓋在在中間的滾動欄上。高度將延伸到整個藍色內(nèi)容的高度，稱為“中部熱區(qū)”。

交互設(shè)置

我們只需要在窗口滾動時設(shè)置交互。如果頂部熱區(qū)動態(tài)面板接觸底部熱區(qū)，則會顯示固定欄；否則，固定欄將被隱藏。

今天的課就到這里了。如果你有任何問題和建議，請在下面留言。并請關(guān)注我哦。