dz¼±µµ¿ò¸»... |
![]() ![]()
|
![]() ÄÄÇ»ÅÍ¿Í °ü·ÃÀÖ´Â ¸ðµç ÆÁÀ» °øÀ¯ÇսôÙ.
¿ì¼± ½ºÅ¸ÀÏ¿¡ °íÁ¤ÇÒ Class¸¦ ¸¸µç´Ù. .sticky { position: fixed; /* °íÁ¤ÇÏ´Â ºÎºÐ */ top: 0px; /* °íÁ¤ÇÒ À§Ä¡ */ z-index: 999; /* °íÁ¤ÇÏ°í³ª¼ ½ºÅ©·ÑÇÏ¸é ´Ù¸¥À̹ÌÁö¿Í °ãÄ¡´Âµ¥ À̶§ ´Ù¸¥À̹ÌÁö À§¿¡ ¿À°ÔÇÏ´Â ºÎºÐ */ } ±×¸®°í °íÁ¤ÇÒ ¸Þ´º ºÎºÐÀ» html·Î ¸¸µç´Ù. À̶§ id¸¦ ÁöÁ¤ÇØ¾ß ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ ±¸ºÐÇÒ ¼ö ÀÖ´Ù. <div id="submenu_bar"> <ul> <li>¸Þ´º1 <li>¸Þ´º2 <li>¸Þ´º3 <li>¸Þ´º4 <li>¸Þ´º5 </ul> </div> ÀÌÁ¦ ³²Àº°Ç ½ºÅ©·ÑÇÒ¶§ ó¸®ÇÒ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÄÚµùÇÏ´Â ºÎºÐÀÌ´Ù. var TopMenu, TopMenuPosition; // Àü¿ªº¯¼ö·Î ÁöÁ¤ÇÑ´Ù. TopMenu = document.getElementById('submenu_bar'); // °íÁ¤µÉ ¸Þ´º¹Ù¸¦ ÀνÄÇÑ´Ù. TopMenuPosition = TopMenu.offsetTop; // °íÁ¤µÉ ¸Þ´º¹ÙÀÇ Ã³À½ À§Ä¡¸¦ ÀνÄÇÑ´Ù. // ½ºÅ©·ÑÀÌ µÇ¸é ½ÇÇàµÉ ÇÔ¼ö function submenu_bar_fixed(){ // ½ºÅ©·ÑµÇ´Â °ª°ú °íÁ¤µÉ ¸Þ´º¹Ù À§Ä¡¸¦ ºñ±³Çؼ °íÁ¤½Ãų class Àû¿ë ¶Ç´Â ÇØÁ¦ ÇÑ´Ù. if ( window.pageYOffset >= TopMenuPosition ) { TopMenu.classList.add("sticky"); } else { TopMenu.classList.remove("sticky"); } } // ½ºÅ©·ÑÀÌ µÇ¸é ½ÇÇàµÉ ÇÔ¼ö ÁöÁ¤ document.addEventListener('scroll',submenu_bar_fixed); ´ÙÀ½Àº Å×½ºÆ®Çغ¼ »ùÇÃÀÔ´Ï´Ù. <style> .sticky { position: fixed; top: 0px; z-index:999999; } #submenu_bar{border-bottom:1px solid blue;border-top:1px solid blue;} li {display:inline-block; background-color:#c0c0c0; margin-right:20px;} </style> <br> <br> <br> <div id="submenu_bar"> <ul> <li>¸Þ´º1 <li>¸Þ´º2 <li>¸Þ´º3 <li>¸Þ´º4 <li>¸Þ´º5 </ul> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <script> var TopMenu, TopMenuPosition; TopMenu = document.getElementById('submenu_bar'); TopMenuPosition = TopMenu.offsetTop; function submenu_bar_fixed(){ if ( window.pageYOffset >= TopMenuPosition ) { TopMenu.classList.add("sticky"); } else { TopMenu.classList.remove("sticky"); } } document.addEventListener('scroll',submenu_bar_fixed); </script> TAG : sticky ¸Þ´º¹Ù°íÁ¤ ÀÚ¹Ù½ºÅ©¸³Æ® javascript
±×¸®°í Áß¿äÇÑ ºÎºÐÀº ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ¸Þ´º¹Ù ´ÙÀ½¿¡ À§Ä¡ÇØ¾ß ÇÑ´Ù´Â Á¡ÀÌ´Ù. ÀÌ°É ¸ô¶ó¼ óÀ½¿¡ ¸¹ÀÌ ÇØ¸ÌÀ½...
|
![]() |
ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ ´ç°¨ 4µ¿ 659-1. ÁÁÀº ¼ÒÇÁÆ®¿þ¾î °³¹ß ¿îµ¿º»ºÎ. ´ëÇ¥ ¾ÈµæÈ£ / sinmungo @ hotmail . com Copyright(c) È£°¡°èºÎ. All Rights Reserved. Since 2003. 04 |