- 4
- 이니스프리
- 조회 수 418
안녕하세요?
웹페이지에서 상단 메뉴 고정과 관련하여 질문 드려요 ^^
www.amina.co.kr 처럼 아래로 스크롤할 때에 페이지 상단의 메뉴를 고정하는 방법으로서
아미나의 경우에는 sticky라는 jQuery 플러그인을 사용하는 것으로 알고 있고,
그 외에도 여러 방법으로 구현이 가능한 것 같습니다.
제 개인적으로 이처럼 상단 메뉴가 고정된 웹페이지에 접속하면
화면의 일정 부분을 계속 차지하여 한 화면에 보이는 컨텐츠의 양이 제한된다는 단점이 있지만
여러 메뉴를 여러 번 이동하는 경우에는 편리한 것 같던데요 ^^
그런데 sticky 플러그인에 대해 스크롤이 튀는 현상(?)이 있다고 하시는 분들도 적지 않게 계시더군요.
특히 모바일에서 문제가 발생하는 경우가 있는 것 같아요.
혹시 이 플러그인이 브라우저나 jQuery 버전에 따라 불안정한가요?
다양한 브라우저에서 로딩이 빠르고 안정적인 웹페이지를 구현하려면
이렇게 상단 메뉴를 고정하는 방법을 포기하는 것이 바람직할까요?
제 기억이 맞다면 스포어 회원님들께서 제작하신 웹페이지에 접속했을 때 상단 메뉴 고정을 하신 분들을 별로 뵙지 못한 것 같아서요 ㅠㅠ
우선 가장 먼저 떠오르는 사례로는 스포어 페이지에도 적용이 되어있지 않죠~!
생각해보니 접속인원이 많은 사이트 중에서 상단 메뉴를 고정한 사이트는 흔하지 않은 것 같네요.
상단 메뉴를 고정하는 경우에 제가 생각하지 못한 다른 단점이 있다면 설명을 부탁드리고
만약 튕김 현상이 없는 플러그인이 있다면 추천을 부탁드립니다 ^-^
답변을 달아주실 분께 미리 감사드립니다~!
그럼 편안한 저녁 되세요 :)
작성자
댓글 4
![profile image](/files/member_extra_info/profile_image/840/162/162840.png?t=1497669415)
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![profile image](/files/member_extra_info/profile_image/819/059/59819.png?t=1717193427)
Hanam09 님 안녕하세요? ^^
늦은 시간에 상세한 답변 달아주셔서 감사합니다!
제가 요소 검사를 통해 확인한 사이트들에서 물론 position: fixed;를 사용한 경우도 있지만
Javascript(또는 jQuery)를 사용하는 방식을 많이 택한 이유가 무엇인지 저도 궁금하더군요 :)
사실 저는 개인적으로 PC 모니터를 위아래로 넓게 사용하는 것을 선호하기 때문에
저 또한 상단에 메뉴를 고정하는 것을 아주 좋아하지는 않습니다.
그런데 모바일의 경우에는 화면 비율이 세로가 더 길게 되어있으니 이런 단점은 어느 정도 상쇄되더군요.
하지만 설명해주신대로 모바일에서는 미세한 움직임에도 헤더가 확장되어 마치 스크롤이 튀는 것 같은 문제가 있겠네요.
저는 그런 문제를 딱히 느끼지 않지만 아미나 포럼에는 그런 불편을 느끼는 분이 의외로 많이 계시더군요 ㅠㅠ
말씀하신 최상단으로 이동하게 하는 버튼도 활용 가치가 높고 유저에게 편리하다고 생각합니다.
그런데 여러 사이트에서 상단 고정 메뉴를 사용한 이유는 클릭이나 터치를 한 번 덜 해도 된다는 편의성과 더불어
아마도 메뉴를 상단에 고정시켜 계속 보이게 하여 유저들이 사이트에 벗어나지 않도록 하려는 일종의 전략으로 생각되네요 ^^
(URL 입력창으로 시선이 이동하기 전에 메뉴를 거치게 되는 점을 말씀드리는 것입니다)
저도 상단 고정메뉴가 그 이상의 큰 가치는 없다고 생각합니다 :)
일단 Hanam09 님 말씀대로 상단 고정메뉴를 사용하지 않고 최상단 이동 버튼을 사용하는 방향으로 작업을 해보겠습니다.
다시 한 번 상세한 답변 감사드립니다 :)
그럼 굿밤 되시고 감기 조심하세요~!
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![profile image](/files/member_extra_info/profile_image/145/220/220145.jpg?t=1603012768)
scrollY 값이 일정 값 이상일 때, 스크롤 이동이 일정 시간동안 없을때, 상단메뉴가 상단에 표시되도록 하는 방법이 있네요.
상단메뉴 노드를 통째로 복사해서(jQuery.clone 등으로) 상단에 position:fixed 처리해 두고, 숨김처리 해 두었다가,
scroll 이벤트가 발생하고, 이후 setTimeout 등을 이용하여 n초 간 이벤트가 재 발생하지 않을 경우, 숨김처리를 해제하면 되겠네요.
var gnbSelector = '#gnb'; // id가 gnb인 요소가 상단메뉴 var scrollTime = 500; // 0.5초 이상 스크롤이 없다면 숨김 var animateTime = 250; // 투명도 애니메이션 속도 $(document).ready(function(){ var gnbClone = $(gnbSelector).clone(); gnbClone.appendTo('body').css({ 'opacity': '0', 'display': 'none' }); var timer; $(window).scroll(function(){ gnbClone.css({ 'opacity': '0', 'display': 'none' }); clearTimeout(timer); timer = setTimeout(function(){ gnbClone.css('display', 'block').animate({ 'opacity': '1' }, animateTime); }, scrollTime); }); });
테스트 전혀 안된 코드니까, 참고하세요.
문법 오류가 날 수도 있고, 다른 문제가 있을수도 있어요.
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
![profile image](/files/member_extra_info/profile_image/819/059/59819.png?t=1717193427)
앗 밤늦은 시간에 이렇게 댓글을 달아주시고 코드까지 올려주셔서 정말 감사합니다!!
네모 님께서 알려주신 소스를 적용해보겠습니다 ^^
그런데 제가 네모 님께 항상 받기만 하고 제가 뭔가 보답해드린게 없어서 늘 감사하고 또 죄송하네요 ㅠㅠ
부디 제가 말씀드린 노트북 공중부양(?) 팁이 네모 님의 노트북 발열 및 소음 완화에 도움이 되시면 좋겠네요~!
다시 한 번 감사드립니다!!
그럼 네모 님께서도 안녕히 주무세요 ^-^
![comment menu](/modules/board/skins/comely_board/images/icn_more.png)
안녕하세요? 이니스프리님.
화면 상단 고정은 거의 무조건적으로 CSS position: fixed 로 이루어 집니다.
Javascript로 scroll할때마다 Element이동을 업데이트 하는 방식을 사용할 수 도 있으나 이건 바람직한 방식이 아닙니다.
이니스프리님이 말씀하신 JS라이브러리 같은 경우 window.Scroll()함수를 사용하여 window.scrollY != 0 경우 해더(그러니까 상단메뉴)의 position 속성을 Fixed 로 고정시키는 방식을 사용한것 같은데요.
1.이런환경에서 테스트 해본 결과 패이지 로딩속도의 차이는 매우 적거나 없었습니다.
-결과적으로 코드 용량의 차이였습니다.
2.스크롤을 할때마다 함수가 실행되는데 모바일이시라면 아주 약간만 움직여도 함수가 실행됩니다.
scrollY값이 일정 값 이하라면 해더가 확장되는데 이 부분에서 미세한 움직임에 해더가 확장되면서 "스크롤이 튄다"라고 표현하신것 같습니다.
3.단점이란게 사용자마다 느낄 수 있는게 다르기에 따로 적지 않겠습니다.
4.개인적으로 제가 추천하는 방법은..
스터디 포 어스처럼 일정 스크롤 이하일시 가장 위로갈수있는 요소 ..(음 그러니까 )위로 이렇게 추가한다면 언제든지 버튼을 눌러 최상단으로 이동하게 할 수 있습니다.
그럼 좋은밤되세요.