스크롤하면 고정되는 코드 - 메뉴 상단 고정 코드 > 웹제작/운영

사이트 내 전체검색
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go

웹제작/운영

SCRIPT 스크롤하면 고정되는 코드 - 메뉴 상단 고정 코드

페이지 정보

profile_image
작성자 키스세븐
조회 1,331회 작성일 22-04-14 13:52

본문

메뉴 상단 고정 코드

스크롤하면 고정되는 코드


PC에서 마우스를 스크롤하거나, 모바일에서 화면을 밀어 올리면 특정 부분이 상단에 붙어서 고정되는 경우가 있다.

여기서는 이렇게 상단에 고정되는 코드 예제를 설명한다. 초보도 따라 올 수 있도록 최소한의 코드만으로 설명할 것이므로, 그 외의 필요한 모양 꾸미기는 직접하길 바란다.



스크롤하면 고정되는 코드 - 메뉴 상단 고정 코드



스크롤 상단 고정에 필요한 제이쿼리


아주 기본적인 것만으로 설명하므로, 복사해 사용할 수도 있을 것이다.


일단 그 전에 필요한 것이 있다. 흔히 제이쿼리라고 하는 것이다. 

그러나 직접 만들 필요는 없다. 아래 코드를 복사해서 붙여넣기만 하면 된다. 


붙여 넣는 곳은 head.php 등의 head 파일을 열어서 아무데나 정하면 된다.

[code]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

[/code]



상단에 메뉴를 고정시키는 방법 예제


그 다음엔 세 가지 코드를 붙여 넣어야 한다. HTML과 CSS와 JS파일을 열어서 붙여 넣어야 한다.

<HTML>

[code]

<div class="이름">

   여기가 메뉴

</div>

[/code]

일단 무엇이 고정되어야 하는지, 대상이 있어야 하기 때문에 대상을 만든다.

한글로 된 부분은 마음대로 바꿔도 되는 부분이다. "이름" 부분을 menu같은 것으로 바꾸면 된다.


<CSS>

[code]

<style type="text/css">

   .이름 { 모양 코드 }

   .fixed { position: fixed; top: 0px; }

</style>

[/code]

위의 class와 같은 이름의 대상을 써주고 fixed를 하나 더 만든다

fixed에 있는 코드는 건드리지 말자. 제일 꼭대기에 위치하라는 명령이다.

모양 코드는 css 코드니까, 검색을 통해서 복사, 붙여넣기 해도 된다.


<JS>

[code]

<script>

$( document ).ready( function() {

  var Offset = $( '.이름' ).offset();

  $( window ).scroll( function() {

    if ( $( document ).scrollTop() > Offset.top ) {

      $( '.이름' ).addClass( 'fixed' );

    }

    else {

      $( '.이름' ).removeClass( 'fixed' );

    }

  });

});

</script>

[/code]

여기에서 "이름"이라고 적힌 부분을 위의 대상 이름과 같게 해 준다.

이때 왼쪽에 붙은 점을 지워버리면 안 된다. 클래스라는 뜻이기 때문이다.

(단, 아이디를 사용하려면 "#이름", 클래스를 사용하려면 ".이름"의 형태가 된다)



스크롤해도 위에 고정되는 코드 예제


위의 기본 코드를 가지고 약간의 변형을 주어서 아래와 같이 만들었다. 

결과물을 확인하고 싶다면 Result를 눌러보면 된다. 

그대로 복사해서 가져다가 붙여넣기 해도 사용할 수 있다. (단, 대상 이름을 같게 해야 함)


정리하면 이렇다.

<HTML>

[code]

1<br>

.... 메뉴 위에 있어야 할 내용

5<br>

<div class="Menu">

  메뉴에 들어갈 링크

</div>

6<br>

.... 실제 콘텐츠 내용

50<br>

[/code]

번호가 많이 나오지만 실제로 필요한 부분은 <div>밖에 없다. 그러나 위 아래에 내용이 없으면 스크롤 해도 효과를 확인할 수가 없기 때문에 그냥 넣어 놓은 것이다. 


<CSS>

[code]

<style type="text/css">

   .Menu { width:0 auto; width: 100%; background-color:#ff66ff; }

   .fixed { position: fixed; top: 0px; }

</style>

[/code]

위의 HTML에서 class="Menu"라고 되어 있으므로 여기서도 .Menu라고 사용했다.

.fixed 부분은 절대로 지우면 안된다. 작동하지 않게 된다.


<JS>

[code]

<script>

$( document ).ready( function() {

  var Offset = $( '.Menu' ).offset();

  $( window ).scroll( function() {

    if ( $( document ).scrollTop() > Offset.top ) {

      $( '.Menu' ).addClass( 'fixed' );

    }

    else {

      $( '.Menu' ).removeClass( 'fixed' );

    }

  });

});

</script>

[/code]

위에서 보면 클래스 이름인 .Menu가 3번 나온다. 이름을 바꾸려면 빠짐없이 다 바꿔야 한다.

여기에 있는 ( 'fixed' )부분이 CSS에 있는 .fixed를 불러와서 변경시키는 코드다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

이렇게 하면 화면을 위로 올리거나 스크롤을 해도 메뉴가 상단에 붙어서 고정된다.

추천0
총 87개 (1Page)
  • RSS
웹제작/운영 목록
번호 제목 조회 추천 날짜
공지 공지 456 0 03-26
86 그누보드 323 0 02-25
85 그누보드 1335 0 10-17
84 SCRIPT 619 0 10-17
83 CSS 630 0 09-10
82 PHP 1101 0 08-26
81 PHP 661 0 08-21
80 기타활용 600 0 08-15
79 그누보드 1139 0 08-05
78 CSS 844 0 08-04
77 HTML 1592 0 07-24
76 그누보드 441 0 07-24
75 HTML 764 0 07-21
74 CSS 677 0 07-18
73 그누보드 630 0 07-09

검색


    허브사이트 "키스세븐"
    [허브사이트란?]
    수많은 사이트와 포털을
    한 번에 모아서
    사용할 수 있는 서비스를 말합니다.