Bootstrap3, affix, fixed-top navbar, toggled text and anchors

StackOverflow https://stackoverflow.com/questions/23184640

Question

I have on my page:

  • fixed top navbar with height 74px;
  • affixed sidebar navigation on the right column;
  • left column, which has toggleable content;
<!-- 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>

The issues I have are following:

  • if I click the link with anchor the content on the left column is hidden under fixed-top navbar (this, I will fix probably with margin-top: -74px; padding-top: 74px)
  • if I collapse the content in the left column then sidebar menu using affix goes creazy. It is still considering collapsed content as visible and therefore the sidebar highlight points to wrong (hidden/collapsed) content.
Was it helpful?

Solution 

// 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);
}
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top