2014-04-20 4 views
0

:Bootstrap3, 부착, 고정 상단의 메뉴 바, 토글 텍스트와 앵커 내 페이지에있는

  • 높이 74px로 고정 상단 메뉴 바;
  • 오른쪽 열에 부착 된 사이드 바 탐색;
  • 왼쪽 열에는 토글 가능한 콘텐츠가 있습니다. I은 다음과 같습니다 한
<!-- initialization of affix --> 
<body data-spy="scroll" data-target="#ds-right-navigation" data-offset="74"> 

<!-- toggleable content --> 
<div class="panel"> 
<a id="ds-word-link-109401" data-toggle="collapse" data-target="#ds-word-109401" class="h3">1. równy</a> 
<section id="ds-word-109401" class="col-md-12 ds-word-box collapse in" style="height: auto;"> 
...collapseable content 
</section> 
</div> 
<div class="panel"> 
... next panel 
</div> 

이슈 :

  • 내가 앵커로 왼쪽 칼럼의 내용을 링크를 클릭하면 고정 탑 메뉴 바 (이, 내가 함께 아마 해결됩니다 아래에 숨겨져있다 margin-top : -74px, padding-top : 74px)
  • 왼쪽 열의 내용을 접은 다음 접미어를 사용하여 사이드 바 메뉴를 선명하게 만듭니다. 보이는대로 축소 된 콘텐츠를 고려하고 있으므로 사이드 바 강조 표시가 잘못된 (숨김/숨김) 콘텐츠를 가리 킵니다.

답변

0
// scroll to anchor 
if(window.location.hash) { 
var hash = window.location.hash.replace(/\/$/, ""); 
if(hash.length){ 
    var top = $(hash).offset().top; 
    //133 = 74 + 74 - 1, where 74 is offset high and -1px for affix 
    $('body, html').stop().animate({ scrollTop: $(hash).offset().top -133 }, 500); 
} 
} 

$('a[href^=#]').on('click',function() { 
var hash = $(this).attr('href'); 
if(hash !== '#') { 
    // top offset is 74 and - 1px is for affix 
    $('body, html').stop().animate({ scrollTop: $(hash).offset().top -73 }, 500); 
} 
});