Fixed Header and Bootstrap Affix / Scrollspy Problem - Doesn't Jump to the Right Location

Question

I'm having trouble trying to find the location of the content in order to jump next to the sub navigation:

Here is a demo of http://jsfiddle.net/52VtD/2661/

As you can see, when you click on the link, this is not next to the navigation due to the fixed title. Content goes past the headline.

<script type="text/javascript"> $(document).ready(function(){ $("#myNav").affix({ offset: { top: 125 } }); }); </script> 

Any ideas?

Greetings

Answer 1

I have upvoted your question because I am working hard on this problem ...

 $(window).on('click.bs.affix.data-api', 

This is an event when we click on the affix navigation bar.

This is unlikely for a manual way to create an affix, and I hope that someone better than me in development can help you ...:

Bootlet: http://jsfiddle.net/52VtD/2662/

Js:

 $(window).on('click.bs.affix.data-api', function(){ setTimeout( function(){ $target = $("#myNav li.active a").attr('href'); $target = $( $target ); //alert($target); $top = $target.offset().top - $('.page-header').height(); window.scrollTo( 0 , $top); e.stopPropagtion(); }, 10); }); 

SetTimeout, because affix does its job until ...

Update after comment:

Bootlet: http://jsfiddle.net/52VtD/2663/

Exposure:

 setTimeout( function(){ $target = $("#myNav li.active a").attr('href'); $target = $( $target ); //alert($target); $top = $target.offset().top - $('.page-header').height(); window.scrollTo( 0 , $top); e.stopPropagtion(); $("#myNav li.active a").removeClass('active'); // <--- HERE }, 10); 

Answer 2

ready for an ugly solution, but what works for me? On the whole anchor attached, I add the class anxix binding,

Then in my css:

 .affix-anchor{ padding-top:60px; margin-top:-60px; } .affix-anchor:first-of-type{ margin-top:0px; } 

Of course this can be done on a large scale using javascript

Answer 3

Instead of using javascript to scroll, just add a relatively positioned div as an anchor:

 <section> <div id="my-anchor-id" style="position: relative; top: -50px"></div> Content </section 

Set top to the height of your title or a little more.