[jQuery] 상하로 움직이는 플로팅 메뉴(float menu) > javascript
javascript

[jQuery] 상하로 움직이는 플로팅 메뉴(float menu)

조회 69회 댓글 0건

스크롤 할때 움직이는 메뉴에 대한 것은 원리를 알면 본인의 상황에 맞게 수정이 가능합니다.

보통 플로팅 메뉴 또는 플로팅배너 라고 합니다.


스크롤 이벤트가 발생이 되면 그 위치 만큼 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>


f08f4a3d7c3248096854e2720bc04fa9_1671328662_1347.png
 


* 고정 시기고 싶으면 아래를 사용

position:fixed


* 포지션과 관련된것은 아래 참고

✔️ CSS 포지션(position)의 종류(static, relative, fixed, absolute,stickey)예 따른 기능 구분 > CSS 




  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 90건 1 페이지
  • profile_image 파일저장이나 또는 가져올때등 상대경로로 호출 하는 경우도 있지만때론 전체 경로를 알아야 되는 경우가 있습니다.그럴때 현재 디렉토리 기준으로 처리하면 좋은때 이럴때 사용 합니다.  // 현재 디렉토리   const _DIR_   = process.cwd();  php의 __DIR__ 과 같은 역활 입니다.확인 결과 위 예제는 잘 되는 것입니다. 현재 V16 버전에서 문제 없었습니다.버전 업그레이드가 심해서 안되는것 들이 종종 입니다.요즘 언어들 …
  • profile_image 현재 nodejs 실행중인 유저를 알아내기 위한 것입니다.같은 프로그램을 쉘에서 실행하기도 하고 웹서버를 통해서 실행하기도 합니다.그런 경우 파일을 쓰게 되면 문제가 발생합니다.  import os from "os";  let osUser  = os.userInfo().username;  if ( osUser  == 'root' ) {    console.log('루트 유저: ', osUser);  }  else {    console.log(…
  • profile_image 아작스로 서버에 전송하는 기능까지 테스트 된것입니다.jQuery 버전에 따라서 ajax 전송하는 방식이 약간 다른 부분이 있으니 버전 참고하세요.본인이 현재 사용하는것과 여기 샘플의 버전이 비슷하면 문제가 되지 않을듯 싶습니다.<!DOCTYPE html><html lang="ko"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible…
  • profile_image 백엔드의 PDF-LIB에서 폰트를 지정하지 않으면 오류가 발생 합니다.영문은 문제 되지 않지만 한글의 경우 오류를 만나게 됩니다.그렇기 때문에 커스텀 폰드를 지정해야 하는데 스탠다드폰트가 아닌 별도 폰트를 사용할 때 필요한 부분입니다.Error: WinAnsi cannot encode "한" 이러한 오류를 만나게 된다면 한글을 사용할 수 없는 폰트이기 때문입니다.    // https://pdf-lib.js.org/#examples  impor…
  • profile_image 특정 문자로 구분자를 줘서 문자열로 만들어주는 함수인데요PHP의 implode에 해당하는 기능입니다.배열의 경우는 간단하게 join 메소드를 사용하면 되는데요. 객체는 안되기 때문에 만들어진것입니다.  let aa = {    'bb1' : 345,    'cc'  : 23,    'ee'  : 'abc'  }  let bb = ['name','2',33,5,'age'];    /**   * 문자열 구분자로 합치기   *   * @param s…
  • profile_image 파일명에서 파일의 확장자만 필요한 경우 사용합니다.자바스크립트 이긴 하지만 nodejs에서 사용해도 동일합니다.블라우저의 자바스크립트에서 사용하는 함수를 백엔드의 노드에서 사용해도 문제 없습니다.  /**   * 파일 확장자   *   * @param string file   *   * @return [type]   *   */  function file_ext( file ) {    let fileExt  = file.split(".").po…
  • profile_image 다른 프로그램 언어와 데이터를 주고 받을때 많이 사용하는 json 문자열과 객체형태로 서로 변환하는 방법에 대한것입니다.여개서 객체는 연관배열로 생각하시면 됩니다.연관배열은 배열의 키 부분이 문자열이 들어갈 수 있는것을 말합니다.  // json 문자열로 만들기  let oParm   = {    'test'    : 123,    'abc'     : '345'  };  console.log('-- 현재값 --------------------…