CSS 변경시 div로 스크롤되는 jQuery (끈적 끈적한 이동)

Question

아래의 코드를 사용하여 끈기있는 탐색을 설정하려고합니다.

div가 고정으로 변경 될 때마다 브라우저가 자동으로 스크롤됩니다. 이것은 브라우저가 원래의 탐색 막대가있는 곳보다 더 멀리 스크롤 할 수 없음을 의미합니다.

아이디어가 있으십니까? 귀하의 콘텐츠가 끈적 요소가 position: relative로 설정되어있을 때, 그것은 충분히 높은하다고 딱 맞는 높이가 수직으로 스크롤하고, 문서 흐름에서 제거 할 때, 그 양은 충분히 높은 더 이상 없을 때

$(document).ready(function() { 
    var stickNavOffset = $('#nav').offset().top; 

    function sticky() { 
     if ($(this).scrollTop() > stickNavOffset-1) { 
      $('#nav').css({position:'fixed',left:'auto'}); 
     } else { 
      $('#nav').css({position:'relative',left:'auto'}); 
     } 
    } 

    $(window).scroll(function() { 
     sticky(); 
    }); 
}); 

Answer 1

귀하의 문제가 발생합니다 스크롤을 강제 실행합니다.

그래서 고정으로 전환하면 문서가 스크롤 할만큼 크지 않으므로 다시 윗쪽으로 돌아옵니다. 끈적 요소를 다시 position: relative으로 설정하면 스크롤 막대가 다시 나타납니다.

페이지에 더 많은 콘텐츠를 추가하여 테스트 할 수 있습니다. 끈적 거리는 요소가 없어도 스크롤 할 수있을 정도로 크면이 문제는 발생하지 않습니다.

또 다른 문제가 있습니다. 콘텐츠가 조금씩 점프됩니다. 사실 갑자기 끈적 끈적한 요소의 높이를 정확히 점프합니다. 갑자기 더 이상 존재하지 않습니다.

내 의견에 당신이 그 공간을 당신의 코드로 설명해야한다고 말한 것은 그 때문입니다. 과거에는 끈적 끈적한 요소를 만들었을 때, 높이가 튀지 않도록 자리에 두는 position: relative으로 설정 한 복제 된 자리 표시 자 요소를 만듭니다.