CODEWITHSUNDEEP
javascriptjqueryanchor
bernte
bernte

Reputation: 1184

find anchor and set active with jquery

i have 3 content boxes and all have a menu with anchor-links to the content-boxes below! (the links are included and dynamic)

yesterday i received help with the script.. and its working very good when i have a large content-box.

see here: http://jsfiddle.net/wv9EQ/7/

now i got an problem when i have an small content-box

see here: http://jsfiddle.net/wv9EQ/8/

when i am for example between box 2 and 3 both anchors getting active. any ideas to fix that? i just want an active anchor only for the box i am currently inside

i use this script:

$(function(){
    var sections = {},
        _height  = $(window).height(),
        i        = 0;

    //// Grab positions of our sections
    $('.section').each(function(){
        sections[this.name] = $(this).offset().top;
    });

    $(document).scroll(function(){
        var $this = $(this),
            pos   = $this.scrollTop();

        for(i in sections){
            if(sections[i] > pos && sections[i] < pos + _height){
                $('a').removeClass('active');
                $('.nav_' + i).addClass('active');
            }  
        }
    });

    $('.head-nav-button').click(function()
    {
        $('a').removeClass('active');
        $('.nav_' + $(this).attr('href').replace('#', '')).addClass('active');
    });
});

Upvotes: 0

Views: 1069

Answers (2)

Koen.
Koen.

Reputation: 26939

Using a offset and break after the first activated menu seems to work:

Trivial parts:

offset   = 50; // Should be at least the height of your nav bar

if(sections[i] - pos + offset > 0){
    $('a').removeClass('active');
    $('.nav_' + i).addClass('active');
    break;            
}

Full code in fiddle here: http://jsfiddle.net/wv9EQ/10/

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117314

Leave the function after setting a section to active: http://fiddle.jshell.net/doktormolle/nCasy/

Upvotes: 1

Related Questions