我的页面上有:
- 固定顶部导航栏,高度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>
我遇到的问题如下:
- 如果我点击带锚的链接,左列的内容隐藏在固定的顶部导航栏下(我可能会用页边空白顶部:-74px;填充顶部:74px)
- 如果我折叠左列中的内容,那么使用词缀的侧边栏菜单就会变成奶油状。它仍然认为折叠的内容是可见的,因此侧边栏突出显示指向错误的(隐藏/折叠)内容
// 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);
}
});