「Glass effect header」實作筆記

2022-05-14 14:42 CSS React

總結

記錄一下如何搭配自製 hook 與 css.glass 做出有毛玻璃效果的 App Header ，視覺設計參考以下網站：毛玻璃效果：MaterialUI、tailwindcss 捲動後修改背景色：Asana

react: 17.0.2

	import { useState, useEffect } from 'react';
	import { debounce } from 'lodash';

	function useIsScrollTopZero(): boolean {
	// States
	const [isTop, setIsTop] = useState(true);

	// Functions
	const handleScroll = (): void => {
	if (!window.scrollY) {
	setIsTop(true);
	} else {
	setIsTop(false);
	}
	};
	const debouncedHandleScroll = debounce(handleScroll, 300);

	// Hooks
	useEffect(() => {
	window.addEventListener('scroll', debouncedHandleScroll);
	() => () => window.removeEventListener('scroll', debouncedHandleScroll);
	}, []);

	// Main
	return isTop;
	}

	export default useIsScrollTopZero;

效果：掛載後根據目前的捲動位置判斷畫面是否（捲到）頂部，回傳 boolean 備註：