잠시만 기다려 주세요

전체검색 :  
HOME   |  여기는?   |  바다물때표   |  알림 (4)  |  여러가지 팁 (921)  |  추천 및 재미 (172)  |  자료실 (20)  |  끄적거림 (569)  |  시나리오 (760)  |  드라마 대본 (248)  |  

    javascript/jquery

javascript/jquery - 스크롤해도 상단에 고정되는 메뉴 만들기, 스크롤 상단에 레이어 고정.
이 름 : 바다아이   |   조회수 : 1179         짧은 주소 : https://www.bada-ie.com/su/?731614758149

jquery url 은 적절히 알아서들...



상단 고정 메뉴


웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다.
그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다.
이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다.
모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 것입니다.

 

jQuery를 이용한 상단 고정 메뉴


다음은 jQuery를 이용한 상단 고정 메뉴 예제입니다.
 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      .jbTitle {
        text-align: center;
      }
      .jbMenu {
        text-align: center;
        background-color: yellow;
        padding: 10px 0px;
        width: 100%;
      }
      .jbContent {
        height: 2000px;
      }
      .jbFixed {
        position: fixed;
        top: 0px;
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jbOffset = $( '.jbMenu' ).offset();
        $( window ).scroll( function() {
          if ( $( document ).scrollTop() > jbOffset.top ) {
            $( '.jbMenu' ).addClass( 'jbFixed' );
          }
          else {
            $( '.jbMenu' ).removeClass( 'jbFixed' );
          }
        });
      } );
    </script>
  </head>
  <body>
    <div class="jbTitle">
      <h1>Site Title</h1>
    </div>
    <div class="jbMenu">
      <p>
        First Menu
        Second Menu
        Third Menu
        Fourth Menu
      </p>
    </div>
    <div class="jbContent">
    </div>
  </body>
</html>
 

상단에서는 사이트 제목과 메뉴가 다 보입니다.



 

스크롤해서 밑으로 내려가면 메뉴가 고정됩니다.



 

스크립트의 의미를 살펴보겠습니다.

var jbOffset = $( '.jbMenu' ).offset();

메뉴의 위치를 파악합니다.

$( window ).scroll( function() {

스크롤이 발생하면 함수를 실행시킵니다.

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

문서의 스크롤바 위치가 메뉴의 수직 위치보다 아래라면

$( '.jbMenu' ).addClass( 'jbFixed' );

메뉴에 jbFixed 클래스를 추가하여 고정시키고,

else {
  $( '.jbMenu' ).removeClass( 'jbFixed' );
}

그렇지 않다면 제거합니다.



출처 : https://www.codingfactory.net/10745
 
| |


      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
현재글 javascript/jquery , . 바다아이 1180
75 javascript/jquery , . , 바다아이 302
74 javascript/jquery javascript , ... 바다아이 981
73 javascript/jquery , cookie class 바다아이 1487
72 javascript/jquery select 3 바다아이 2248
71 javascript/jquery , ... 바다아이 2414
70 javascript/jquery , timezone, , ... moment.js 바다아이 2565
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 2451
68 javascript/jquery (block) , ... 바다아이 2351
67 javascript/jquery textarea cursor , , focus 바다아이 2994
66 javascript/jquery jquery ajax option .... 바다아이 2666
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 2738
64 javascript/jquery javascript , , , , () 바다아이 2868
63 javascript/jquery javascript (date ) 바다아이 2909
62 javascript/jquery CSS3 javascript 바다아이 3238
61 javascript/jquery javascript , cookie, , , , , 바다아이 2982
60 javascript/jquery javascript 바다아이 3250
59 javascript/jquery javascript / , , , 바다아이 3758
58 javascript/jquery url , , encode, decode ... 바다아이 2736
57 javascript/jquery javascript ... frame location.href 바다아이 2869
56 javascript/jquery File Upload Progress, .... . 바다아이 3260
55 javascript/jquery javascript, json , json Highlight 바다아이 3326
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 3455
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 3093
52 javascript/jquery javascript entity , , encode, decode 바다아이 3440
51 javascript/jquery javascript post, get , 바다아이 4558
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 3525
49 javascript/jquery jquery autocomplete , , . 바다아이 3232
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 3636
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 3374
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL ]
서버위치 : 오라클 클라우드 춘천  실행시간 : 0.0321
to webmaster... gogo sea. gogo sea.