[Next.js] scroll-position

 

1.  스크롤 했을 때 CloseButton이 보이게

2.  CloseButton을 눌렀을 때 thumbnail image가 안보이게

3.  https://www.npmjs.com/package/@n8tb1t/use-scroll-position

 

import { useScrollPosition } from '@n8tb1t/use-scroll-position'

// visible 여부, img position state 관리
const [isVisible, setIsVisible] = useState(false)
const [imgPosition, setImgPosition] = useState('')

useScrollPosition(({ currPos }) => {
    const scrollY = Math.abs(currPos.y)

    // scrollY의 값에 따라 visible, img position 값을 변경
    if (scrollY === 0) setImgPosition('')
    else if (scrollY >= 180) setIsVisible(true)
    else setIsVisible(false)
}, [isVisible])

const handleClick = () => {
    setImgPosition('absolute')
}