繁体   English   中英

Bootstrap3,词缀,固定顶部导航栏,切换的文本和锚点

[英]Bootstrap3, affix, fixed-top navbar, toggled text and anchors

我在页面上:

  • 固定顶部导航栏,高度为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修复)
  • 如果我折叠左栏中的内容,则使用词缀的侧边栏菜单会变得疯狂。 它仍然认为折叠的内容是可见的,因此侧边栏突出显示指向错误(隐藏/折叠)的内容。
// 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);
}
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM