ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

½ºÅ©·ÑÇصµ »ó´Ü¿¡ °íÁ¤µÇ´Â ¸Þ´º ¸¸µé±â
8³â Àü
À¥ÆäÀÌÁöÀÇ ³»¿ëÀÌ ¸¹À¸¸é ½ºÅ©·ÑÇؼ­ º¸°Ô µË´Ï´Ù. ±×·¯¸é ÆäÀÌÁö¿¡ ÀÖ´Â ¸ðµç ³»¿ëÀÌ ¿òÁ÷ÀÌ°í »ó´Ü¿¡ ÀÖ´Â ¸Þ´ºµµ À§·Î »ç¶óÁö°Ô µË´Ï´Ù.

ÀÌ·¸°Ô µÇ¸é ÆäÀÌÁöÀÇ ³»¿ëÀ» ´Ù º¸°í ´Ù¸¥ ¸Þ´º·Î À̵¿ÇÏ·Á ÇÒ ¶§ ´Ù½Ã ¹®¼­ÀÇ À§·Î ½ºÅ©·ÑÇؼ­ ¿Ã¶ó°¡¾ß ÇÏ´Â ºÒÆíÀÌ ÀÖ½À´Ï´Ù.

ÀÌ ºÒÆíÀ» ÇؼÒÇÏ´Â ¹æ¹ý ÁßÀÇ Çϳª°¡ ¸Þ´ºÀÇ À§Ä¡¸¦ °íÁ¤½ÃÅ°´Â °ÍÀÔ´Ï´Ù. °£´ÜÇÑ ¿¹Á¦´Â ´ÙÀ½°ú °°½À´Ï´Ù.

http://book.cmsfactory.net/jQuery/V01/Tips/jquery-tip-fixed-header.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Fixed Header</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.11.0.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' );
}

±×·¸Áö ¾Ê´Ù¸é Á¦°ÅÇÕ´Ï´Ù.
ÃßõÃßõ : 463 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.