½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > ¸Þ´º °ü·Ã > ½ºÅ©·Ñ ´Ù¿î½Ã ¸Þ´º°¡ ¼û°ÜÁö´Â ½ºÅ©¸³Æ® Auto hiding Navbar on scroll down »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
½ºÅ©·Ñ ´Ù¿î½Ã ¸Þ´º°¡ ¼û°ÜÁö´Â ½ºÅ©¸³Æ® Auto hiding Navbar on scroll down
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ¸Þ´º °ü·Ã
´Ù¿î·Îµå Ƚ¼ö 163 ȸ
°£´Ü¼³¸í ½ºÅ©·ÑÀ» ´Ù¿î½Ã ¸Þ´º°¡ ÀÚµ¿À¸·Î ¼û°ÜÁö°í ¾÷Çϸé Ãâ·ÂµÇ´Â ½ºÅ©¸³Æ®
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ




html


<nav>
  <div class="container">
    <a href="#" id="brand">Brand</a>
    <button>
      <span></span>
      <span></span>
      <span></span>
    </button>
   
    <ul class="navbar-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">page a</a></li>
      <li><a href="#">page b</a></li>
      <li><a href="#">page c</a></li>
      <li><a href="#">page d</a></li>
    </ul>
   
  </div>
</nav>

css

body
  background: #eee
  min-height: 3000px
  padding: 0
  margin: 0
  font-family: 'Open Sans', sans-serif

 

.container
  width: 80%
  margin: 0 auto
  clear: both
 
a
  display: inline-block
  color: #333
  text-decoration: none
 
 
nav
  background: #fff
  height: 80px
  line-height: 80px
  box-shadow: 1px 1px 1px rgba(0, 0,0, 0.2)
  position: fixed
  top: 0
  left: 0
  width: 100%
  z-index: 9998
  transition: all 0.5s
  &.scrollUp
    transform: translateY(-80px)
  
  ul.navbar-menu
    margin: 0
    padding: 0
    display: inline-block
    float: right
   
    li
      display: inline-block
      margin: 0 10px
      a
        color: #666
        font-size: 14px
       
  a#brand
    text-transform: uppercase
    foat: left
    font-weight: 800
    font-size: 20px
   
  button
    background: none
    width: 30px
    height: 40px
    margin-top: 20px
    border: none
    float: right
    display: inline-block
    cursor: pointer
    display: none

    span
      width: 30px
      height: 40px
      height: 2px
      background: #333
      display: block
      margin: 5px 0
     
   

@media (max-width: 768px)
  nav ul.navbar-menu
    display: none
  nav button
    display: block




js


$(document).ready(function () {
 
  'use strict';
 
   var c, currentScrollTop = 0,
       navbar = $('nav');

 

   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = navbar.height();
    
      currentScrollTop = a;
    
      if (c < currentScrollTop && a > b + b) {
        navbar.addClass("scrollUp");
      } else if (c > currentScrollTop && !(a <= b)) {
        navbar.removeClass("scrollUp");
      }
      c = currentScrollTop;
  });
 
});



½ºÅ©·ÑÀ» ´Ù¿îÇÒ¶§ ¸Þ´º¹ÙÀÇ À§Ä¡¸¦ »ó´ÜÀ¸·Î À̵¿½ÃÄѼ­ ¾Èº¸ÀÌ°Ô ÇÕ´Ï´Ù.

½ºÅ©·ÑÀ» ¾÷ÇÏ¸é ¿ø·¡ÀÇ À§Ä¡·Î À̵¿ÇÕ´Ï´Ù.


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
:¿ÕÇÏÇÏ:
2020-02-19 18:19:27
ÄáÄáÀÌ
Âù¼º 37
¹Ý´ë 45
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 10306922 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.