[jQuery] 스크롤 따라다니는 퀵메뉴 만들기

 

 

예전에 한 때 홈페이지에 항상 퀵메뉴가 있던 시절이 있었는데,

없어지는 듯 하다가 요새 다시 보이는 듯 하다.

 

아무래도 쇼핑몰이나 고객의 요구에 빨리 응해야하는 사이트에서는 퀵메뉴가 필수불가결한 요소인 것 같다.

보통 오른쪽에 완전히 고정해두는 형태(position:absolute)로 넣을 수도 있지만 완전 고정해두면 좀 유연성이 없어보이고(?)

너무 큰 사이즈로 넣는다면 사이트의 다른 구성요소보다 더 이목이 집중되는 느낌...

 

 

요새는 아래처럼 작은메뉴를 만들어 스크롤 내릴때 마다 부드럽게 따라오는 형태로 많이 사용하는 것 같다.

jquery를 활용하면 부드럽게 따라오는 메뉴를 만들 수 있다.

 

 

 

일단 결과물은 아래

 

 

 

HTML

퀵메뉴를 구성하고 클래스값(quickmenu)이나 아이디를 지정한다.

<div class="quickmenu">
  <ul>
    <li><a href="#">등급별혜택</a></li>
    <li><a href="#">1:1문의</a></li>
    <li><a href="#">후기</a></li>
  </ul>
</div>

 

 

jQuery

스크립트를 넣어서 움직임을 조정한다.

1000 숫자를 변경하면 따라오는 속도를 조절할 수 있다.

$(document).ready(function(){
  var currentPosition = parseInt($(".quickmenu").css("top"));
  $(window).scroll(function() {
    var position = $(window).scrollTop(); 
    $(".quickmenu").stop().animate({"top":position+currentPosition+"px"},1000);
  });
});

 

 

간단하게 끝!