「Glass effect header」實作筆記
總結
記錄一下如何搭配自製 hook 與 css.glass 做出有毛玻璃效果的 App Header ，視覺設計參考以下網站： 毛玻璃效果：MaterialUI、tailwindcss 捲動後修改背景色：Asana
版本與環境
react: 17.0.2筆記
自製 hook
效果：掛載後根據目前的捲動位置判斷畫面是否（捲到）頂部，回傳 boolean
備註：
- debounce 300 的反應稍微有點慢，如果視覺反饋要更即時的話，可將延遲降低到 50 至 100 左右
- Firefox 須透過手動設定才能開啟支援 CSS
backdrop-filter效果（參考 Can I use）