2013-03-25 2 views
1

콘텐츠와 함께 오른쪽 구석에 div를 만들려면 부트 스트랩 접미어 플러그인을 사용하고 있습니다. 나는 창 상단에 또 다른 섹션을 열어 다른 섹션을 열어 세부 사항을 보여줍니다. 문제는 div 세부 정보 섹션이 확장되면 첨부 된 div의 오프셋이 업데이트되어야한다는 것입니다. 나는이 업데이트 될 때 오프셋 개발자 도구에서 확인한이접미어 플러그인에서 동적으로 오프셋 변경

<div class="affixed-box" data-offset-top="160" data-spy="affix"> 

    $(".detail-btn").click(function(){ 
    if ($(".opened").length > 0) //The detail div is expanded 
     { 
     $(".affixed-box").attr('data-offset-top','160'); 
    } 

    else  
    { 
    $(".affixed-box").attr('data-offset-top','400'); 
    } 
    }); 

같은 짓을했지만, 부착 요소의 동작은 (는 같은 최고 위치에 부착하기로 유지) 동일하게 유지됩니다. 오프셋 최상위 값을 동적으로 업데이트하려면 어떻게해야합니까? http://twitter.github.com/bootstrap/javascript.html#scrollspy

.scrollspy('refresh') 

추가하거나 DOM의 요소의 제거와 함께 scrollspy를 사용하여, 당신과 같이 Refresh 메서드를 호출해야합니다 다음 scrollspy가 ('새로 고침') 방법이 도움이된다면

+0

의 하단에 http://jsfiddle.net/fztdv/1/ 쇼 버튼을 누르면 오프셋 값을 변경해야합니다. – Dania

답변

2

내가 작업하고있는 새 사이트에서 유사한 상황이 발생했습니다 (첨부 된 navbar 위의 슬라이드 쇼는 창의 크기가 변경 될 때 높이가 변경되고 잘못된 오프셋이있는 navbar가 남음).

대답이처럼 접사 플러그인에 관련된 모든 클래스를 제거 후 jQuery를 데이터 캐시에서 접사 데이터를 삭제하는 것입니다 :

$([selector]).removeData('affix').removeClass('affix affix-top affix-bottom'); 

내가 발견 여기 https://github.com/twbs/bootstrap/issues/5870

0

은 참조 :

$('[data-spy="affix"]').each(function() { 
var $spy = $(this).scrollspy('refresh') 
}); 

행운을 빈다!

+0

다음은 유사한 동작을 설명하는 바이올린입니다. jsfiddle.net/fztdv/1 show 버튼을 누르면 오프셋 값을 변경해야합니다. – Dania

+0

jsfiddle을 이용해 주셔서 감사합니다. 문제를 쉽게 파악할 수 있습니다. 아직 해결하지 못했습니다. 이 질문에 대한 답이 당신에게 도움이되는지 확인하십시오 : http://stackoverflow.com/questions/11421408/bootstrap-scrollspy-doesnt-work-inside-tabs –

+0

왜 단지 : $ ('[data-spy = "affix" ] '). scrollspy ('refresh ');'? – whiskeysierra

0

manual에 따르면 데이터 속성에 오프셋 값을 반환하는 함수를 전달할 수 있습니다.

이미 문제를 처리 한 누군가가 JSFiddle을 시작하면 쉽게 도움이 될 것입니다.

+0

다음은 유사한 동작을 설명하는 바이올린입니다. jsfiddle.net/fztdv/1 show 버튼을 누르면 오프셋 값을 변경해야합니다. – Dania