0

私は自分のページに持っています：

  • 高さ74pxの上部ナビゲーションバーを修正。
  • 右側の列にサイドバー ナビゲーションを追加。
  • 左の列には、切り替え可能なコンテンツがあります。
<!-- 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 で修正します)
  • 左の列のコンテンツを折りたたむと、接辞を使用したサイドバー メニューが狂ってしまいます。折りたたまれたコンテンツが表示されていると見なされているため、サイドバーのハイライトは間違った (非表示/折りたたまれた) コンテンツを指しています。
4

1 に答える 1

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);
}
});
于 2014-05-06T15:21:58.987 に答える