사용자:이유종

특정스크롤에서 레이어 상단에 고정시키기

<script>
 $(window).scroll(function () {
    var st = $(document).scrollTop();
      if(st>500) {
        $('#menuBox').css('position', 'fixed');
        $('#menuBox').css('top', '0px');
        $('#menuBoxHidden').css('display', 'block');
      }
      if(st<500) {
        $('#menuBox').css('position', 'relative');
        $('#menuBoxHidden').css('display', 'none');
      }
  });
</script>
<div id="menuBox">
    <div id="globalMenu"></div>
    <div id="menuBoxHidden" style="display:none"></div>
</div>

유저의 스크롤 값을 받아 특정영역을 지나면 메뉴레이어를 상단에 고정시키고 숨겨진 메뉴박스를 보여줌
기본 메뉴와 스크롤반응 메뉴의 디자인을 다르게 제작해서 상황에 맞게 메뉴박스를 노출할 수 있다