모바일보기에서 접미사 nav으로 문제 표시

Question

방금 ​​차고를위한 사이트를 완성했습니다. 아래에 nav가있는 머리글이 있으며, 스크롤 할 때 nav이 화면 상단에서 수정됩니다. 보통 매우 간단하고 다른 사이트에서이 작업을 수행하는 데 아무런 문제가 없습니다. 그러나이 특정 프로젝트에서 휴대 전화에로드 된 경우 10 번 중 9 번은 스크롤에서 위로 올라서는 탐색기에 문제가 있습니다. 새 상태를 수용하기 위해 패딩이 페이지에 추가 된 흰색 스트립을 잠깐 남겨 둡니다. 일찍 뛰어 올랐던 nav.

사이트가 http://telstargarage.com이고 아무리 내가이 사이트를 사용하면 코드를 게시 할 수 없습니다. 형식을 제대로 지정하지 않았다고해도 도움을받을지라도이 사이트는 모두 미리보기에서 멋지게 보이지만, 게시하지 않으므로 언제든지 사이트를 포크로 만들 수 있습니다.

Answer 1

코드를 게시하지 않았으므로 진단하기가 어렵습니다. 나는 다른 방법으로 이것에 대해 갈 것을 제안

$(document).ready(function() { 
    var menu = $('.menu'); 
    // This is likely incorrect on document ready 
    var origOffsetY = menu.offset().top; 

    function scroll() { 
     if ($(window).scrollTop() >= origOffsetY) { 
      $('.menu').addClass('navbar-fixed-top'); 
      $('.scrolled').addClass('menu-padding'); 
     } else { 
      $('.menu').removeClass('navbar-fixed-top'); 
      $('.scrolled').removeClass('menu-padding'); 
     } 
    } 

    ... 

} 

:하지만 나는이 문제를 추측하고있어

는 여기에있다. 아마도 오프셋을 변경하여 메뉴의 컨테이너 오프셋과 비교할 수 있습니다. 스크린의 크기를 재조정하여 원래의 오프셋 계산이 정확하지 않은 문제를 해결합니다. 이 같은 JS은이

<div class="menu-container"> 
    <div class="menu"> 
     // Your menu in here 
    </div> 
</div> 

식으로 뭔가 :

$(document).ready(function() { 

    function scroll() { 
     if ($(window).scrollTop() >= $('.menu-container').offset().top) { 
      $('.menu').addClass('navbar-fixed-top'); 
      $('.scrolled').addClass('menu-padding'); 
     } else { 
      $('.menu').removeClass('navbar-fixed-top'); 
      $('.scrolled').removeClass('menu-padding'); 
     } 
    } 

    ... 

}