도와주세요

웹페이지의 상단 메뉴를 고정하는 플러그인에 관하여 질문 드립니다

이니스프리2018.11.19 21:14조회 수 77댓글 4

    • 글자 크기

안녕하세요?


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



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


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


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



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


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


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



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


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


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



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


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


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


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


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



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


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


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


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


당분간 자주 들리기 어려울 것 같네요 ㅠㅠ

가능하다면 출첵은 꾸준히 할게요~!

    • 글자 크기
안녕하세요. AJAX로 페이지 긁어오는데에 보안오류가 생겼는데 조언을 구하고자 합니다. (by Hanam09) mysql에서 select * from 테이블.... (by 홀민)
  • 2018.11.19 23:25

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

     

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

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

     

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

     

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

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

     

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

     

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

     

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

     

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

     

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

     

    그럼 좋은밤되세요.

  • @Hanam09
    이니스프리글쓴이
    2018.11.19 23:58

    Hanam09 님 안녕하세요? ^^

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

     

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

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

     

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

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

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

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

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

     

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

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

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

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

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

     

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

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

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

  • 2018.11.20 01:01

    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);
        });
    });



    테스트 전혀 안된 코드니까, 참고하세요.


    문법 오류가 날 수도 있고, 다른 문제가 있을수도 있어요.

  • @네모
    이니스프리글쓴이
    2018.11.20 01:19

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

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

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

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

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

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

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 Project HOSTING 서비스 시작 시기 및 안내사항13 마스터 2018.12.16 141
공지 회원 전용 페이지가 생겼습니다.12 마스터 2018.03.20 2535
공지 [필독] 질문하는 방법5 마스터 2018.02.23 529
503 브라우저와 기본응용프로그램과의 양방향 통신에 대하여6 Hanam09 2018.12.16 50
502 usb 부팅 질문 드립니다.1 calm 2018.12.14 36
501 파이썬 멜론차트 크롤링 구현 관련17 title: 포토샵joyful 2018.12.08 180
500 음원스트리밍은 음원 보안을 어떤 방식으로 하나요?15 title: 포토샵joyful 2018.12.06 112
499 제가 자바스크립트를 잘몰라서 원론적인 질문 하나 드립니다.6 홀민 2018.12.06 71
498 또다시 WWW 관련하여6 협스 2018.12.05 59
497 다음 api 사용하려고 뒤적거리다보니 curl_init, curl_easy_init 비교7 홀민 2018.12.05 62
496 콘서트 가보신 분 있으신가요?5 Blessed_Umbrella 2018.12.04 49
495 사이트 정보 등록 관련5 title: 포토샵joyful 2018.12.01 51
494 WP에서 스팸....?11 협스 2018.11.30 87
493 스마트폰 연락처 관리를 어떻게 하시나요?8 이니스프리 2018.11.29 84
492 공유폴더가 안되는데 왜 안되는지를 모르겠습니다.3 calm 2018.11.27 52
491 [PHP] nl2br 함수 관련 문제 재발1 Blessed_Umbrella 2018.11.26 45
490 스마트 동기화가 가능한 클라우드 추천 부탁드려요~!2 이니스프리 2018.11.24 53
489 스포어 서버에서는 JQuery를 사용할 수 있나요?4 Blessed_Umbrella 2018.11.23 50
488 [PHP] nl2br 함수 관련3 Blessed_Umbrella 2018.11.21 56
487 원래 .co.kr 도메인과 .kr 도메인을 따로 따로 구입해야 하는건가요?7 맛스타 2018.11.20 80
486 노트북이 너무 시끄럽습니다.10 네모 2018.11.19 101
485 안녕하세요. AJAX로 페이지 긁어오는데에 보안오류가 생겼는데 조언을 구하고자 합니다.6 Hanam09 2018.11.19 55
웹페이지의 상단 메뉴를 고정하는 플러그인에 관하여 질문 드립니다4 이니스프리 2018.11.19 77
이전 1 2 3 4 5 6 7 8 9 10... 26다음
첨부 (0)
서버에 요청 중입니다. 잠시만 기다려 주십시오...