[JavaScript]Fixed 메뉴(code)

2021. 4. 23. 17:48JavaScript/Example

See the Pen QWdzOeO by minsucoding (@minsucoding) on CodePen.

 

간단하게 JS를 작성하였습니다

JS에서 scrollY > 0 이라면 클래스를 추가해줘라 하는 코드를 만들어 주었습니다

클래스를 추가하게 되면 CSS에 미리 작성을 해둔 값들이 할당되면서 자연스럽게 상단에 예쁜 메뉴가 생기는걸 볼수있습니다

그냥 고정 시켜주면 재미가 없으니 padding값을 수정하고 color를 반전을 주면서 더욱 멋있는 메뉴를 만들어 봤습니다

이를 응요한다면 보다 더 멋있는 웹을 만드는게 가능하다고 생각합니다