위로 스크롤 할 때만 FIxed navbar

Question

고정 된 navbar를 만들려고합니다. 스크롤바를 숨기고 위로 스크롤하면 위로 표시됩니다.

내 navbar가 위쪽에서 37.5px에 위치하며, 페이지 중간에있는 경우 위로 스크롤하면 페이지 상단에 위치해야합니다.

다음은 내가 시도한 것입니다.

CSS

.nav-up 
    top -80px 
    background-color #8fd0f3 
.nav-down 
    top 0 
.navbar-wrapper 
    position fixed 
    // top -7px 
    top 37.5px 
    // -webkit-transform translateY(37.5px) 
    z-index 100 
    width 100% 
    padding-top 17.5px 
    transition top 0.2s ease-in-out 
    padding-bottom 17.5px 
    .navbar-elements 
     width 960px 
     margin 0 auto 
     position relative 
     .logo 
      cursor pointer 
     .nav-buttons 
      text-transform uppercase 
      position absolute 
      right 0 
      top 0 
      display inline-block 
     .nav-btn  
      display inline-block 
      vertical-align middle 
      border-radius 4px 
      padding 12px 21px 12px 21px 
      font-family 'Lato' 
      cursor pointer 
      // transition opacity 0.3s ease 
     .breeder-btn 
      background-color rgba(255, 255, 255, 1) 
      margin-left 10px 
      transition background-color 0.2s ease 
      // margin-right 136px 
     .breeder-btn:hover 
      background-color rgba(255, 255, 255, 0.85) 
     .guarantee-btn 
      background-color rgba(17, 35, 114, 1) 
      color white 
      transition background-color 0.2s ease 
     .guarantee-btn:hover 
      background-color rgba(17,35,114, 0.85) 

네비게이션 바에서 최고 -80px을두고 HTML

<div class="navbar-wrapper nav-down"> 
      <div class="navbar-elements"> 
       <img src="../img/logo.png" class="logo"> 
       <div class="nav-buttons"> 
        <div class="nav-btn guarantee-btn"> 
         our guarantee   
        </div> 
        <div class="nav-btn breeder-btn"> 
         new breeder sign-up  
        </div> 
       </div>    
      </div> 
     </div> 

JS

// Hide Header on on scroll 
function HeaderScroll() { 
    var delta = 5; 
    var navbarHeight = $('.navbar-wrapper').outerHeight(); 
    console.log(navbarHeight); 

    $(window).scroll(function(event){ 
     hasScrolled() 
    }); 

    setInterval(function() { 
     // if (didScroll) { 
      hasScrolled(); 
      // console.log(didScroll); 
     // } 
    }, 5); 
    hasScrolled(); 
} 

function hasScrolled() { 
    var delta = 5; 
    var navbarHeight = $('.navbar-wrapper').outerHeight(); 
    var position = $(window).scrollTop(); 
    // console.log($(this)) 
    // console.log(st) 
    // Make sure they scroll more than delta 
    if(Math.abs(position) <= delta) 
     return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (position > navbarHeight){ 
     // Scroll Down 
     $('.navbar-wrapper').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     // Scroll Up 
     if(position + $(window).height() < $(document).height()) { 
      // console.log("Scroll up") 
      $('.navbar-wrapper').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 
} 

내 현재 코드는 클래스 .nav 업을 추가하는 관리

, 하지만 그 규칙은 내가 이미 navbar에서 가지고있는 최고 37.5px로 덮어 씌워집니다.

Answer 1

왜 부트 스트랩을 사용하지 않습니까? 그게 당신이 필요로하는 모든 것을 제공합니다