I am having problems trying to get the location of the content to jump alongside the sub navigation:

Here is a demo /

As you can see when you click on a link its not alongside the navigation because of the fixed header. The content runs past the header.

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

Any ideas?

Cheers

I am having problems trying to get the location of the content to jump alongside the sub navigation:

Here is a demo http://jsfiddle/52VtD/2661/

As you can see when you click on a link its not alongside the navigation because of the fixed header. The content runs past the header.

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

Any ideas?

Cheers

• javascript
• jquery
• html
• css
• twitter-bootstrap

3 Answers 3

I upvoted your question because I was working hard to this problem...

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

It's the event when we click on the affix navbar.

It unlikely a manual way to make the affix, and I hope someone better than me in development can help you... :

Bootply : http://jsfiddle/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 do his work before...

Update after ment :

Bootply : http://jsfiddle/52VtD/2663/

Extract :

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);

ready for an ugly solution, but which works for me? On all the affixed anchor, I add a class affix-anchor,

Then, in my css:

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

Of course, that could be done on a large scale by javascript

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 the top to the height of your header or a bit more.