웹 퍼블리싱 질문
본문
| 로고이미지 |
| 메뉴바1 메뉴바2 메뉴바3 메뉴바4 |
ㅣ ㅣ
ㅣ body ㅣ
ㅣ ㅣ
ㅣ ㅣ
ㅣ_______________________________________________________________________________ㅣ
이런 식으로 화면이 있을 때 바디 스크롤을 내리면 로고이미지는 사라지고
메뉴바는 최상단에 fixed 형식으로 하고 싶은데 어떤 식으로 해야할까요...?
아래가 스크롤을 내리면 로고 이미지는 사라지고 메뉴바가 최상단에 fixed된 형식입니다.
| 메뉴바1 메뉴바2 메뉴바3 메뉴바4 |
ㅣ ㅣ
ㅣ body ㅣ
ㅣ ㅣ
ㅣ ㅣ
ㅣ_______________________________________________________________________________ㅣ
답변 2
안녕하세요^^
미리 CSS에서 메뉴바의 다른 클래스를 지정하셔서 fixed로 처리하시고
처음에 보이는 메뉴바의 원래 클래스는 그대로 내비두신다음
자바스크립트나 제이쿼리를 사용하셔서 스크롤이벤트를 주시고
스크롤 이벤트를 통해 스크롤이 일정 세로크기 이상 넘어가면 클래스를
addClass나 removeClass 를 통해 메뉴바가 fixed인 클래스로 바꿔주시면 됩니다.
아항 2개의 메뉴바가 있어야된단 말이군요
감사합니다 ㅎㅎ
도움이 되셨다면 채택 부탁드립니다^^
채택이 늦어 죄송합니다..ㅠㅠ
다른 방식으로 구현했지만 답변 감사합니다 ㅎㅎ
영카트 최신버전의 모바일 상단이 말씀하신형식이랑 비슷하죠.
영카트는 로고, 메뉴호출부분이 고정되지만 고정되는 부분에 넣고 싶은 메뉴넣으시면 될것 같네요.
그거보고 수정해서 사용하세요.
감사 답글이 늦어 죄송합니다..
먼저 대답해주신 분 채택했지만
답변 감사합니다.
