Q & A

질답게시판

홈 > 회원포럼 > 질답/버그/제안
질답/버그/제안

sticky 상단메뉴 고정시 스크롤 튀는(점프)하는 현상.

1 디스달 5 71

보통 모바일에서는 상단고정 메뉴를 많이 하는데 저도 상단고정메뉴를 해봤는데 스크롤이 점프(튀는)하는 현상이 있네요. ㅎ

자세히 보니깐 상단메뉴 바로 밑에 있는 타이틀이 스크롤시 없어지는 혹은 점프하는 현상이 있어서 그런 것 같습니다.


페이지의 상단 타이틀 부분을 점프 안시키고 그냥 올라가게 할 수 있는 방법이 없을까요?

굳이 타이틀을 순간적으로 올려서 튀게 만들 필요는 없을 것 같다는 초보 생각입니다. ㅎ

5 Comments
M 한별아빠 11.07 19:02  
1. 이건 공간이 있다가 없어지고, 다시 생기면서 튀는 부분이라...

2. 애니메이션 주던지 하는 방법으로 보완을 할 수는 있는데, 가장 확실한 것은 사라지더라도 영역을 유지할 수 있는 백단을 만들어 두는 것입니다. 그럼 공간이 유지되기 때문에 이야기하는 현상 자체가 없어지죠.

3. 문제는 이 백단부분이 sticky 되는 영역을 어떻게 구성하는지에 따라서 높이값이 달라지기 때문에 일일이 수동으로 잡아줘야 하는데, 이걸 커스트마이징 하는 분들에게 설명을 하거나 이해를 시켜드리기 힘들어요. 그래서 그냥 그대로 두는 것...ㅠㅠ
1 디스달 11.08 00:54  
친절한 답변 감사드립니다.
보통 모바일에서는 스크롤이 길어서 상단고정을 많이 쓰는데
실제 여러 모바일 홈페이지를 보니 튕김현상이 없더군요.
완벽한 아미나에서 그 부분이 조금 아쉽습니다.ㅠㅜ.
혹 커스터마이즈 할 수 있는 활용팁이나 판매 정도 하셔도 필요한 사람은 살 것 같네요.
M 한별아빠 11.08 01:07  
1. 적용하는 방식 자체가 테마... 정확히는 저 부분 구조에 따라서 다 달라서 백단 만들고 영역 높이 고정해 주세요. 정도 밖에 이야기 못 드립니다.

2. 그래서 판매라는게 일일이 다 작업해 드려야 하는 거라 제작의뢰 받는 거랑 차이가 없습니다. 물론 구조에 따라서 난이도 자체는 천자만별이 될꺼라 가격도 다 다를꺼고...ㅠㅠ

3. 참고로 애니메이션 적용하면 좀 부드럽게는 가능한데, 메뉴타입이 여러개라서 고려할께 많아 이것도 적용하기 애매하기는 합니다. 고정된 1개의 메뉴타입이라면 쉽기는 하겠죠.
1 디스달 11.08 13:07  
아~ 답변 너무 감사드립니다. ㅎ 일일히 수정해야겠군요. ㅎ
저랑 같은 문제로 질문 올린 분이 있으시던데 한별아빠님께서

.sticky-wrapper { transition: transform 1000ms ease-out; }  이렇게 하면 조금 괜찮다고 해서

thema/Basic/colorset/Basic/colorset.css 파일을 열어

.sticky-wrapper { transition: transform 1000ms ease-out; }

추가했는데 sticky-wrapper 이거 클래스 자체가 최신 버전에서는 이름이 바꿨는지 추가해도 아무 반응이 없더라고요.
M 한별아빠 11.09 02:24  
아래 속성 컬러셋에 적용해줘 보세요.

.sticky-wrapper .at-menu{ -webkit-transition: height .4s ease, opacity .3s ease; -o-transition: height .4s ease, opacity .3s ease; transition: height .4s ease, opacity .3s ease; }

또는 colorset.css 파일 32라인을 아래처럼...

.nav-fixed .at-menu { width:100%; z-index:10; left:0px; -webkit-transition: height .4s ease, opacity .3s ease; -o-transition: height .4s ease, opacity .3s ease; transition: height .4s ease, opacity .3s ease; }

테스트하다 잠시 중단한 코드입니다.ㅠㅠ
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand