반응

Question

하는 기능을 재설정 I가 추가/스크린 < 768px

스크립트

function hasScrolled() { 
    if($(window).width() > 768) { 
    var st = $(this).scrollTop(); 
    if (Math.abs(lastScrollTop - st) <= delta) 
    return; 

    if (st > lastScrollTop && st > navbarHeight) { 

    // Scroll Down 
    $('#s-nav').removeClass('nav-down').addClass('nav-up'); 

    } else { 

    // Scroll Up 
    if (st + $(window).height() < $(document).height()) { 
    $('#s-nav').removeClass('nav-up').addClass('nav-down'); 
    } 
} 
lastScrollTop = st; 
} 
} 

HTML

제외 스크롤 이벤트를 기반으로 .nav 업 및 .nav 다운을 제거 다음 코드

<nav id="s-nav" class="nav-down"> .... </div> 

CSS

#s-nav { position: fixed; } 

#s-nav.nav-up { top: -75px; } 

@media screen and (max-width: 768px) { 

    #s-nav.nav-up { top: 0; } 
} 

그러나 모바일에서 화면 크기로 (반응 형) 화면 크기를 조정하면 창이 스크롤 된 것처럼 메뉴가 '올라갑니다'. 나는 화면 크기 때 나는

Answer 1

당신은 당신이 원하는 당신이 클래스를 설정하는 행을 추가 할 수 있습니다 '을'유지되도록하는 기능을 '리셋'할 때 $(window).width() <= 768 :하지 작동

function hasScrolled() { 
    if($(window).width() > 768) { 
     var st = $(this).scrollTop(); 
     if (Math.abs(lastScrollTop - st) <= delta) 
      return; 

     if (st > lastScrollTop && st > navbarHeight) { 

      // Scroll Down 
      $('#s-nav').removeClass('nav-down').addClass('nav-up'); 

     } else { 

      // Scroll Up 
      if (st + $(window).height() < $(document).height()) { 
       $('#s-nav').removeClass('nav-up').addClass('nav-down'); 
      } 
     } 
    }else{ 
     $('#s-nav').removeClass('nav-up').addClass('nav-down'); 
    } 
    lastScrollTop = st; 
}