• 목록
  • 아래로
  • 위로

안녕하세요?


웹페이지에서 상단 메뉴 고정과 관련하여 질문 드려요 ^^



www.amina.co.kr 처럼 아래로 스크롤할 때에 페이지 상단의 메뉴를 고정하는 방법으로서


아미나의 경우에는 sticky라는 jQuery 플러그인을 사용하는 것으로 알고 있고,


그 외에도 여러 방법으로 구현이 가능한 것 같습니다.



제 개인적으로 이처럼 상단 메뉴가 고정된 웹페이지에 접속하면 


화면의 일정 부분을 계속 차지하여 한 화면에 보이는 컨텐츠의 양이 제한된다는 단점이 있지만


여러 메뉴를 여러 번 이동하는 경우에는 편리한 것 같던데요 ^^



그런데 sticky 플러그인에 대해 스크롤이 튀는 현상(?)이 있다고 하시는 분들도 적지 않게 계시더군요.


특히 모바일에서 문제가 발생하는 경우가 있는 것 같아요.


혹시 이 플러그인이 브라우저나 jQuery 버전에 따라 불안정한가요?



다양한 브라우저에서 로딩이 빠르고 안정적인 웹페이지를 구현하려면 


이렇게 상단 메뉴를 고정하는 방법을 포기하는 것이 바람직할까요? 


제 기억이 맞다면 스포어 회원님들께서 제작하신 웹페이지에 접속했을 때 상단 메뉴 고정을 하신 분들을 별로 뵙지 못한 것 같아서요 ㅠㅠ


우선 가장 먼저 떠오르는 사례로는 스포어 페이지에도 적용이 되어있지 않죠~!


생각해보니 접속인원이 많은 사이트 중에서 상단 메뉴를 고정한 사이트는 흔하지 않은 것 같네요.



상단 메뉴를 고정하는 경우에 제가 생각하지 못한 다른 단점이 있다면 설명을 부탁드리고


만약 튕김 현상이 없는 플러그인이 있다면 추천을 부탁드립니다 ^-^


답변을 달아주실 분께 미리 감사드립니다~!


그럼 편안한 저녁 되세요 :)


작성자
이니스프리 119 Lv. (0%) 1876250/115200000EXP

당분간 일신상의 사정으로 쪽지나 댓글로 답변을 드리기 어렵습니다. 죄송합니다.

 

CSVpuymXAAAVVpd.jpg

댓글 4

Hanam09
profile image

안녕하세요? 이니스프리님.

 

화면 상단 고정은 거의 무조건적으로 CSS position: fixed 로 이루어 집니다.

Javascript로 scroll할때마다 Element이동을 업데이트 하는 방식을 사용할 수 도 있으나 이건 바람직한 방식이 아닙니다.

 

이니스프리님이 말씀하신 JS라이브러리 같은 경우 window.Scroll()함수를 사용하여 window.scrollY != 0 경우 해더(그러니까 상단메뉴)의 position 속성을 Fixed 로 고정시키는 방식을 사용한것 같은데요.

 

1.이런환경에서 테스트 해본 결과 패이지 로딩속도의 차이는 매우 적거나 없었습니다.

-결과적으로 코드 용량의 차이였습니다.

 

2.스크롤을 할때마다 함수가 실행되는데 모바일이시라면 아주 약간만 움직여도 함수가 실행됩니다.

 

scrollY값이 일정 값 이하라면 해더가 확장되는데 이 부분에서 미세한 움직임에 해더가 확장되면서 "스크롤이 튄다"라고 표현하신것 같습니다.

 

3.단점이란게 사용자마다 느낄 수 있는게 다르기에 따로 적지 않겠습니다.

 

4.개인적으로 제가 추천하는 방법은..

 

스터디 포 어스처럼 일정 스크롤 이하일시 가장 위로갈수있는 요소 ..(음 그러니까 )위로 이렇게 추가한다면 언제든지 버튼을 눌러 최상단으로 이동하게 할 수 있습니다.

 

그럼 좋은밤되세요.

comment menu
2018.11.19. 23:25

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → Hanam09
profile image
+1

Hanam09 님 안녕하세요? ^^

늦은 시간에 상세한 답변 달아주셔서 감사합니다!

 

제가 요소 검사를 통해 확인한 사이트들에서 물론 position: fixed;를 사용한 경우도 있지만

Javascript(또는 jQuery)를 사용하는 방식을 많이 택한 이유가 무엇인지 저도 궁금하더군요 :)

 

사실 저는 개인적으로 PC 모니터를 위아래로 넓게 사용하는 것을 선호하기 때문에

저 또한 상단에 메뉴를 고정하는 것을 아주 좋아하지는 않습니다.

그런데 모바일의 경우에는 화면 비율이 세로가 더 길게 되어있으니 이런 단점은 어느 정도 상쇄되더군요.

하지만 설명해주신대로 모바일에서는 미세한 움직임에도 헤더가 확장되어 마치 스크롤이 튀는 것 같은 문제가 있겠네요.

저는 그런 문제를 딱히 느끼지 않지만 아미나 포럼에는 그런 불편을 느끼는 분이 의외로 많이 계시더군요 ㅠㅠ

 

말씀하신 최상단으로 이동하게 하는 버튼도 활용 가치가 높고 유저에게 편리하다고 생각합니다.

그런데 여러 사이트에서 상단 고정 메뉴를 사용한 이유는 클릭이나 터치를 한 번 덜 해도 된다는 편의성과 더불어

아마도 메뉴를 상단에 고정시켜 계속 보이게 하여 유저들이 사이트에 벗어나지 않도록 하려는 일종의 전략으로 생각되네요 ^^

(URL 입력창으로 시선이 이동하기 전에 메뉴를 거치게 되는 점을 말씀드리는 것입니다)

저도 상단 고정메뉴가 그 이상의 큰 가치는 없다고 생각합니다 :)

 

일단 Hanam09 님 말씀대로 상단 고정메뉴를 사용하지 않고 최상단 이동 버튼을 사용하는 방향으로 작업을 해보겠습니다.

다시 한 번 상세한 답변 감사드립니다 :)

그럼 굿밤 되시고 감기 조심하세요~!

comment menu
2018.11.19. 23:58

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

네모
profile image
+1

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
2018.11.20. 01:01

신고

"네모님의 댓글"

이 댓글을 신고 하시겠습니까?

이니스프리 작성자 → 네모
profile image

앗 밤늦은 시간에 이렇게 댓글을 달아주시고 코드까지 올려주셔서 정말 감사합니다!!

네모 님께서 알려주신 소스를 적용해보겠습니다 ^^

그런데 제가 네모 님께 항상 받기만 하고 제가 뭔가 보답해드린게 없어서 늘 감사하고 또 죄송하네요 ㅠㅠ

부디 제가 말씀드린 노트북 공중부양(?) 팁이 네모 님의 노트북 발열 및 소음 완화에 도움이 되시면 좋겠네요~!

다시 한 번 감사드립니다!!

그럼 네모 님께서도 안녕히 주무세요 ^-^

comment menu
2018.11.20. 01:19

신고

"이니스프리님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 376
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4060
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4464
862 접근 가능한 링크가 없는 html 파일의 내용을 불러오는 방법이 있을까요? 4 image title: 크롬NUBE 21.03.23.20:35 196
861 개발자밑 프로그래밍 할줄 아시는분들께 궁금한 점이 있습니다. 4 image 자뻑보이 21.03.18.20:21 170
860 사이트를 오프라인에서 열람할 수 있는 방법에 대해 질문 드려요! 4 이니스프리 21.03.16.20:45 231
859 Qnap nas 관리자 페이지 접속 문의드립니다. 5 자뻑보이 21.03.11.20:25 273
858 여러분들은 위키 업그레이드를 어떻게 하시나요? 12 가온이 21.03.07.20:53 191
857 카카오 로그인 api처럼 위챗 로그인 api 사용해보신분 계신가요? asdf1234 21.03.03.16:04 166
856 사설 IP에 도메인 연결하기 11 네모 21.02.28.23:10 1160
855 포트 포워딩 질문있습니다. 10 image asdf1234 21.02.24.16:56 166
854 동영상 썸네일 만드는 것 관련하여 질문 드립니다. 2 이니스프리 21.02.20.14:51 163
853 별로중요한건아니지만 궁금중이 생김 10 초보 21.02.19.09:54 222
852 [파이썬]완전제곱수 5 초보 21.02.17.10:23 234
851 미디어위키 하;;;; 9 wikiowner 21.02.16.13:37 164
850 미디어위키에 루아 소프트웨어를 깔아야 하는데 어디서 깔면 되나요 2 image wikiowner 21.02.15.09:50 80
849 마스터님! 3 citen 21.02.14.12:45 77
848 미디어위키 오류: Lua 오류: 내부 오류: 인터프리터가 127 상태로 종료했습니다 2 wikiowner 21.02.14.11:31 247
847 커뮤니티 사이트에서 모바일 접속시 Rich-Text 에디터를 사용하지 않는 것이 더 좋을까요? 6 이니스프리 21.02.13.23:19 145
846 도메인 연결은 어떻게 하나요 1 파이리 21.02.09.14:22 89
845 내 포인트는 어디서 확인하나요? 3 파이리 21.02.08.11:58 54
844 사이트 정보 등록글 링크가 뭐죠..? 2 파이리 21.02.07.20:11 56
843 미디어위키 SSH 업데이트 4 wikiowner 21.02.01.13:08 91