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

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

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

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

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

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

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

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

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

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

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

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

그럼 좋은밤되세요.

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

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

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