• 목록
  • 아래로
  • 위로

안녕하세요?


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



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


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


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



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


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


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



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


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


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



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


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


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


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


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



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


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


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


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


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

Make StudyForUs Great Again!

 

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 2201
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 5884
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4541
706 네이버 카페의 게시글 크롤링과 관련하여 질문 드려요 ^^ 7 image 이니스프리 20.04.04.23:33 1523
705 파이썬 Requests과 HTTP 통신에 관하여 이론적으로 궁금한건데요~ 4 이니스프리 20.04.03.15:55 206
704 아이콘 구매와 활용법에 대한 질문 10 해피보이 20.04.02.18:04 233
703 사이트 메인페이지에 갈림길 화면이 뜨게 하는 법에 대하여 어쭈어 봅니다. 5 image 입체그림 20.04.01.19:31 218
702 Cloudflare와 관련하여 질문 드려요 ^-^ 7 이니스프리 20.03.30.14:48 433
701 크롤링 용도로 사용하는 VPS의 트래픽이 얼마나 될까요?? 2 이니스프리 20.03.29.21:02 262
700 안녕하세요ㅠㅠ 위키 URL 리다이렉션 관련 질문입니다 1 김광현 20.03.26.16:33 228
699 그누보드용 회원차단 크롬 확장프로그램을 만들어보려는데요~ ^-^ 7 이니스프리 20.03.24.23:53 263
698 VPS 웹서버 설치 후 보안을 위해 추가로 해야되는 조치에는 어떤 것이 있을까요?? 6 이니스프리 20.03.13.22:46 249
697 페북이나 트위터처럼 태그 속성이 자주 변경되는 사이트의 크롤링은 어떻게 해야 될까요?? 4 이니스프리 20.03.09.00:27 240
696 브라우저 개발자도구에서 formdata를 숨기는 방법이 있는가요? 6 이니스프리 20.03.07.23:54 2649
695 그누보드5 홈피 관리해주실분 찾습니다. 찰리 20.03.04.23:10 206
694 [파이썬] 윈도우에서 datetime 객체의 invalid format string 에러 3 이니스프리 20.03.04.15:52 1500
693 XE 에디터가 작동하지 않아요 ㅠㅠ 4 image 입체그림 20.03.03.17:30 220
692 VPS 플랜 선택과 관련하여 질문 드립니다 ^-^ 4 image 이니스프리 20.02.28.20:52 215
691 스터디포어스 웹호스팅상에서 비주얼에디터 설치하는 중 오류가 났습니다 ㅠㅠ image 입체그림 20.02.28.14:40 207
690 [해결][CURL/PHP] 스터디포어스서버에서의 PHP CURL에 대한 특정 서버의 잘못된 응답에 대하여 3 Hanam09 20.02.27.15:36 312
689 [파이썬] 웹 페이지 크롤링 시 조건에 따라 보여졌다 안보여지는 class를 조건문으로 사용 하고 싶은데요.. 4 위돈톡애니모 20.02.25.15:19 1333
688 [파이썬] Temporary failure in name resolution에 대해 여쭤봅니다 2 이니스프리 20.02.25.11:50 988
687 홈서버용 CPU 좀 봐주시면 감사하겠습니다~ ㅠㅠ 7 image 이니스프리 20.02.24.22:40 218