dz¼±µµ¿ò¸»...

¤ýÈ£°¡°èºÎ¸¦ ½ÃÀÛÆäÀÌÁö·Î

ÀºÇà Ä«µå Áõ±Ç º¸Çè ºÎµ¿»ê

     
My Áñ°Üã±â ¼öÁ¤
[¹«·á]  ¿À´ÃÀÇ ¿î¼¼  /  ¹ÙÀÌ¿À¸®µë
¿©±â´Â ȸ¿ø´ÔÀÌ Á÷Á¢ µî·ÏÇϽÅ
Áñ°Üã´Â »çÀÌÆ®°¡ Ãâ·ÂµË´Ï´Ù.
ÄÄÇ»ÅÍ¿Í °ü·ÃÀÖ´Â ¸ðµç ÆÁÀ» °øÀ¯ÇսôÙ.

[JavaScript] ½ºÅ©·ÑÇÒ¶§ ¸Þ´º¹Ù »ó´Ü¿¡ °íÁ¤Çϱâ

È£°¡°èºÎ|2019-09-11 15:41:23|Á¶È¸ : 5752

¿ì¼± ½ºÅ¸ÀÏ¿¡ °íÁ¤ÇÒ 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 


È£°¡°èºÎ 2019-09-11 15:44:10


±×¸®°í Áß¿äÇÑ ºÎºÐÀº ÀÚ¹Ù½ºÅ©¸³Æ®°¡ ¸Þ´º¹Ù ´ÙÀ½¿¡ À§Ä¡ÇØ¾ß ÇÑ´Ù´Â Á¡ÀÌ´Ù.

ÀÌ°É ¸ô¶ó¼­ óÀ½¿¡ ¸¹ÀÌ ÇظÌÀ½...
¹øÈ£ Á¦             ¸ñ ÷ºÎ ÀÛ ¼º ÀÏ ÀÛ¼ºÀÚ Á¶È¸
125  

[À©µµ¿ì] Windows¿¡¼­ Æú´õÀÇ ³»¿ëÀ» ÅؽºÆ® ÆÄÀÏ·Î ÀúÀåÇÏ´Â ¹æ...

  2023-08-22 È£°¡°èºÎ 163
124  

[javascript] select potion Á¦¾î º¯¼öµé

  2022-10-17 È£°¡°èºÎ 122
123  

[¸®´ª½º] gzip ¾ÐÃàÇ®±â

  2022-09-17 È£°¡°èºÎ 122
122  

[php] ³¯Â¥ °è»ê ¿¹Á¦

  2022-07-25 È£°¡°èºÎ 225
121  

[¿¢¼¿] ¼¿¿¡ ³¯Â¥ ÀÔ·Â ´ÜÃàÅ°

  2022-06-30 È£°¡°èºÎ 178
120  

[html5] ½º¸¶Æ®Æù À¥ºê¶ó¿ìÀú »ó´Ü¹Ù ¾ø¾Ö´Â ¹æ¹ý

  2022-05-18 È£°¡°èºÎ 322
119  

[html5] datalist »ç¿ë¹ý

(1)
2022-02-03 È£°¡°èºÎ 273
118  

[Android] android studio ¼³Ä¡ ¹× ¼ÂÆÃ

(2)
2021-06-05 È£°¡°èºÎ 960
117  

[MySql] ³¯Â¥ ºñ±³ °Ë»ö (¿À´Ã, ¾îÁ¦, ÇÑ´ÞÀü...)

  2021-06-01 È£°¡°èºÎ 2168
116  

phpMyAdmin ¼³Ä¡ ¹× ¿À·ù ÇØ°á

(2)
2021-04-26 È£°¡°èºÎ 31734
115  

MS ¿§Áö °­·ÂÇÑ »õ·Î°íħ

(1)
  2020-11-12 È£°¡°èºÎ 536
114  

cURL »ç¿ë¹ý

(6)
  2020-05-16 È£°¡°èºÎ 3284
113  

[Javascript] ¼ýÀÚ¸¦ ±ÛÀÚ·Î ¹Ù²ãÁÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ®

(1)
  2020-03-11 È£°¡°èºÎ 754
112  

[¿¢¼¿] ¼¿À» Ŭ¸¯ÇÏ¸é ¼³¸í ¸Þ½ÃÁö¸¦ Æ˾÷ ½ÃÅ°´Â ¹æ¹ý

(1)
2019-11-07 È£°¡°èºÎ 4934
111  

[Javascript] confirm Ŭ¸¯ È®Àιޱâ

  2019-10-09 È£°¡°èºÎ 21940
110  

[HTML][CSS] ÆäÀÌÁö ³Ñ±è ¹× ÇÁ¸°ÅÍ Ãâ·Â ¿©¹é ¼³Á¤

(1)
  2019-09-30 È£°¡°èºÎ 112033
109  

[javascript] window.openÀ¸·Î ¿ÀÇÂÇÑ ÀÚ½Äâ¿¡¼­ ºÎ¸ðâ ÅÂ±× Ç...

  2019-09-27 È£°¡°èºÎ 1883
108  

[jQuery] ÀͽºÇ÷η¯ ¿Ü ³¯Â¥ ÀԷ¹ڽº »ç¿ëÇϱâ(input type dat...

(1)
2019-09-23 È£°¡°èºÎ 260666
107  

[JavaScript] ½ºÅ©·ÑÇÒ¶§ ¸Þ´º¹Ù »ó´Ü¿¡ °íÁ¤Çϱâ

(1)
  2019-09-11 È£°¡°èºÎ 5752
106  

CSS3 ¹Ìµð¾îÄõ¸® @media ±ÔÄ¢ ÀÌÇØ.

  2019-09-09 È£°¡°èºÎ 4627
óÀ½À¸·Î ¾ÕÀ¸·Î | [1] 2 3 4 5 6 | ´ÙÀ½ ¸¶Áö¸·