2

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

Here is a demo http://jsfiddle.net/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

John
  • 1,777
  • 9
  • 42
  • 66

3 Answers3

2

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.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 do his work before...

Update after comment :

Bootply : http://jsfiddle.net/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);
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
  • Hi, thanks for the reply, it seems to be working with that code but when i click a link it highlights the previous
  • as active, for example i click link #2 and it will set link #1 as active? Any ideas?
    • – John Feb 11 '14 at 14:02
  • when i click the second link in the list, it wont change to active, it just jumps to the top and selects the first link as active. – John Feb 11 '14 at 14:12
  • I think it's ok, but I'll wait for your return. – BENARD Patrick Feb 11 '14 at 14:15
  • really strange, when I add into my code base, its still doing it with the new code you have done. As i come in, the first
  • is active, then i click the 2nd
  • and it jumps back to the first
  • . It seems to be selecting the previous
  • as active all the time?
    • – John Feb 11 '14 at 14:22
  • I cannot reproduce it in fiddle, does it work for you (the fiddle) ? If the fiddle works for you, can you share a link where it don't work ? – BENARD Patrick Feb 11 '14 at 14:28
  • yes the fiddle works good. Just when i add the code from the fiddle into my codebase it wont work. Also on the fiddle how can you stop the menu jumping when clicking on links near the top? cheers. – John Feb 11 '14 at 14:34
  • when i comment out the second part of the code which starts with $(window).on... etc the active link works fine – John Feb 11 '14 at 14:39
  • cheers, looks great, just that issue with the active link going to the previous one, but thanks mate – John Feb 11 '14 at 14:52