[jQuery] 상하로 움직이는 플로팅 메뉴(float menu)
스크롤 할때 움직이는 메뉴에 대한 것은 원리를 알면 본인의 상황에 맞게 수정이 가능합니다.
보통 플로팅 메뉴 또는 플로팅배너 라고 합니다.
스크롤 이벤트가 발생이 되면 그 위치 만큼 div박스의 top 위치를 변경시켜주는 방식 입니다.
아래는 jQuery를 이용하였습니다.
<script>
// 화면 크기가 변경 되었 때
$(window).resize(function( event ) {
$(this).trigger('scroll');
});
// 페이지 읽힌 다음 위치 설정
$(document).ready(function() {
// 기존 css에서 플로팅 배너 위치(top)값을 가져와 저장한다.
var floatPosition = parseInt($("#floatBox").css('top'));
var divBoxHeight = parseInt($('#floatBox').outerHeight(true));
$(window).scroll(function() {
// 현재 스크롤 위치를 가져온다.
var scrollTop = $(window).scrollTop();
var newPosition = scrollTop + floatPosition + "px";
$("#floatBox").stop().animate({ "top" : newPosition }, 500);
}).scroll();
});
</script>
* 참고사항
만약 상대적으로 처리가 되어 위치값을 못 가져오게 되면 그 위쪽에 아래와 같은것을 하나 줘서 위에서 부터 높이를 가져 오도록 합니다.
<div id="floatGijun" style=" position: absolute;"></div>
<!-- 위에서 부터 높이를 알기 위한것 -->
<div id="floatGijun" style="position: absolute;"></div>
<!-- 상대적으로 주는법 -->
<div id="floatBox" style="position:relative; ">
<div id="floatBanner" style="position: absolute;">
보여줄 내용...
</div>
</div>
![[jQuery] 상하로 움직이는 플로팅 메뉴(float menu)](https://www.pabburi.co.kr/content/bbs/view_image.php?fn=%2Fdata%2Feditor%2F2212%2Ff08f4a3d7c3248096854e2720bc04fa9_1671328662_1347.png "[jQuery] 상하로 움직이는 플로팅 메뉴(float menu)")
* 고정 시기고 싶으면 아래를 사용
position:fixed
* 포지션과 관련된것은 아래 참고
✔️ CSS 포지션(position)의 종류(static, relative, fixed, absolute,stickey)예 따른 기능 구분 > CSS
관련링크