부트 스트랩 : affix.js - 내가 JS와 함께 호출 할 때 나는이 내 html 코드 또 다른 요소의 높이를 얻을 목적

Question

에 넣어 수 없습니다

<div class="masthead"> 
    <img class="img-responsive" data-src="holder.js/990x150/auto" alt="Generic placeholder image"> 
</div> 
<!-- /container --> 
<div id="menu-gora" class="navbar navbar-inverse affix-top"> 

IMG 그것을 가지고 내 노트북에 반응하는 요소입니다 150 픽셀을 얻었습니다. 시도 할 때 :

$(document).ready(function(){ 
     $('#menu-gora').affix({ 
      offset: { 
      top: 150 
      } 
     }); 
    }); 

잘 작동합니다. 그러나 다음과 함께 작동하지 않습니다.

top: $('.masthead img').height() 

30px를 통과 한 후 "부착"을 시작합니다. 항상. 응답 성이 필요하고 내가 뭘 잘못하고 있는지 모르겠습니다./

값을 console.log($('.masthead img').height())으로 읽으면 올바른 값을 표시합니다. 문제가 무엇입니까? 부트 스트랩 문서 당

Answer 1

는 동적 높이를 가지고있는 "적정"방법은 그러나

$('#menu-gora').affix({ 
    offset: { 
     top: function() { 
      return (this.top = $('.masthead img').height()); 
     } 
    } 
}); 

처럼 함수 반환 값을 갖는 것이다! 이것은 동적으로 크기가 조정 된 내용을 고려하지 않습니다. 예를 들어, 회전식 요소 나 아코디언이있어 부착 된 요소의 높이가 변경되는 경우 새 높이를 다시 계산해야합니다. 내가 아는 한 오프셋 번호를 동적으로 변경하는 방법은 없습니다. 지금 내가하고있는 일은 크기가 바뀔 때마다 접사를 다시 적용하는 것입니다 (부착 된 메뉴 위에 알 수없는 양의 붕괴가 있음).