• 목록
  • 아래로
  • 위로

안녕하세요?


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



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 382
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4066
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4464
922 계속 사용중이던 네트워크 공유 폴더가 갑자기 액세스 불가라고 뜹니다. 6 image 장윤서 18.06.07.16:55 34331
921 팀뷰어 대체할 원격 제어 프로그램 추천 부탁드립니다 16 이니스프리 17.11.30.15:38 32325
920 엑셀 그래프의 축 간격 조절 문제입니다. 2 image 국내산라이츄 17.08.10.11:06 12483
919 아이폰/아이패드 충전기 발열 관련 질문 드립니다 9 image 이니스프리 19.05.02.22:52 11105
918 에러 523 해결법 4 입체그림 20.02.21.16:48 6690
917 PyQt 실행시 프리징 현상 관련하여 질문 드립니다! ㅠㅠ 3 이니스프리 19.07.06.03:37 6685
916 프린터가 지 맘대로 프린트를 하네요. 3 곰도리푸 18.04.04.18:20 6017
915 윈도우용 메일 클라이언트가 필요합니다. 9 네모 18.01.11.20:15 5867
914 크롬에서 특정 사이트 접속 문제 관련하여 질문 드립니다 9 이니스프리 17.03.27.18:03 5309
913 오라클 클라우드 프리티어 가입이 안 되네요 ㅠㅠ 20 이니스프리 20.06.26.21:31 4827
912 파이썬 에디터로 어떤 것이 좋나요? 14 NoYeah 20.01.08.21:08 4525
911 라떼판다와 라즈베리 파이 중 어느 쪽을 사는 게 나을까요? 9 제르엘 18.10.14.19:25 3827
910 나무 위키의 수익구조는 무엇일까요? 2 NoYeah 18.03.18.15:56 3808
909 파티션 복구 프로그램 TestDisk 잘 아시는 분 계시나요? 29 이니스프리 17.11.10.14:53 3745
908 IE11에서 이미지가 깨지는 현상을 해결할 수 있을까요? 2 이니스프리 19.08.02.00:01 3702
907 파일질라로 연결하니까 보안되지 않은 서버입니다. TLS를 통한 FTP를 지원하지 않습니다. 이렇게떠요 해결방안좀 1 마카오 16.09.11.00:57 3654
906 자바스크립트 FormData와 관련된 메서드의 IE 호환성과 관련하여 질문 드립니다 ^^ 6 image 이니스프리 19.08.05.14:22 3426
905 선택약정 안 되는 중고폰의 경우에는 어떤 단점이 있는 것인가요?? 6 이니스프리 20.01.21.14:30 3100
904 집에서 시놀로지 NAS로 워드프레스나 미디어위키 돌리면 느릴까요? 10 이니스프리 17.01.16.20:56 2979
903 [Requests] multipart/form-data의 전송에 대해 질문 드립니다 ^^ 4 이니스프리 19.12.18.22:00 2904