부착 된 사이드 바 위치가 변경되지 않는다

Question

Bootstra Affix 플러그인을 사용하는 데 문제가 있습니다. 사이드 메뉴가 첨부되어 있지만 항상 헤더 아래 및 내 문서의 바닥 글 위에 머물러 있기를 원하므로 data-offset-top 및 data-offset-bottom HTML5 데이터 속성을 사용하여 메뉴를 두 가지 모두에서 멀리합니다.

페이지를 맨 아래로 스크롤 할 때까지이 모든 것이 올바르게 작동합니다. 메뉴가 맨 위로 이동하고 더 이상 붙지 않습니다. 페이지를 아래로 스크롤하면 메뉴가 바닥 글 위에 머물러있게됩니다 (정확함). 그러나 백업을 스크롤하면 상단으로 점프하고 거기에 머무르게됩니다.

여기는 CodePen입니다. 어떻게이 문제를 해결할 수 있습니까?

는

---

편집 : 디버깅 후

, 그 문제에 도달하고 affix-bottom 관련이있을 것으로 보인다 것으로 나타났습니다과 position:relative 스타일이 적용된다. 다시 스크롤 할 때 스타일이 다시 설정되며 위치는 변경되지 않습니다.

부트 스트랩 스크립트에 어떤 종류의 기능이나 버그가 있습니까?

Answer 1

내 질문에 설명 된 동작이 "의도 된 기능"인지 버그인지는 여전히 알 수 없습니다. 그러나 다음과 같은 해결 방법으로 문제를 해결할 수있었습니다.

내 질문의 편집에서 설명한대로 position:relative은 affix-bottom 상태에 적용되지만 affix 상태로 전환 할 때 제거되지 않는 문제가 있습니다. 따라서 affix 상태로 전환 할 때 모든 인라인 스타일을 완전히 제거하기위한 이벤트 처리기를 추가했습니다. 단순히 CodePen에 사용 된 JS에 다음 코드를 추가합니다 : 물론

$('.right_box').on('affixed.bs.affix', function() { 
    $this = $(this); 
    $this.removeAttr('style'); 
}); 

다른 인라인 스타일을 사용하지 않는 경우이 해결에만 적용되어야한다.

아마도이 해결책은 다른 사람이 같은 문제에 어떻게 대처 하는지를 도울 수 있습니다. 문제가있는 실제 해결 방법이 있다면 기꺼이 알게 될 것입니다.