總結

記錄一下如何搭配自製 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）

效果展示

參考文件

• MDN: window.scrollY
• MDN: backdrop-filter