Some Jquery / CSS help regarding navigation

Question

I'm currently working on my pfolio website and im quite far but not there yet...

http://thinkagain.nu/?page_id=2501 See this page I have this navigation bullets / dots on the right which you can navigate through the projects. I got it working for so far that if you click a bullet / dot it becomes selected (orange color) but what I want is that it also becomes selected state when you scroll down the sections, so without clicking on it.

So when your scrolling the 2nd project, the 2nd bullet / dot becomes selected, 3rd project makes the 3rd bullet / dot become selected and so on.

This is my code:

CSS:

#floatnav {
    position: fixed;
    right: -50px;
    top: 50%;
    width: 8em;
    margin-top: -2.5em;
}

.bullit {
    background-color:#242424;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    border-radius:17px;
    border:0px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    padding:5px 5px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    box-shadow: inset 1px 4px 9px -6px;
    box-shadow: 2px 2px 1px #888888; 
}
.bullit:hover {
    background-color:#ebebeb;
    box-shadow: inset 1px 4px 9px -6px;
}
.bullit.active {
    position:relative;
    top:1px;
    background:orange;
}

HTML:

<ul id="floatnav">
    <a href="#cinerama" class="bullit"></a>
    <a href="#magicalgems" class="bullit"></a>
    <a href="#deltalloyd" class="bullit"></a>
    <a href="#ezchef" class="bullit"></a>
</ul>

Jquery/javascript:

$('#floatnav a').click(function() {
    $('#floatnav a').removeClass('active'); /*Remove previous*/
    $(this).addClass('active');             /*Active clicked*/
})

If anyone could help me it would be greatly appreciated! Thanks in advance.

Nick

Answer 1

Try this (see example http://jsfiddle.net/shtrih/Z3BTd/)

$(window).on('scroll', function () {
    var positions = [],
        elements = [],
        scrolltop = $(this).scrollTop()
    ;
    $('> div', '#main').each(function() {
         var pos = Math.abs($(this).position().top - scrolltop);
         positions.push(pos);
         elements[ pos ] = this.id;
    });

    var array_min = Math.min.apply(null, positions);
    var current_element_id = elements[ array_min ];
    console.log(current_element_id);

    $('a', '#floatnav').removeClass('active');
    $('a[href="#'+ current_element_id +'"]', '#floatnav').addClass('active');
});

Used materials:

• JavaScript: min & max Array values?
• How to know the end of scrolling event for a <div> tag
• http://jqapi.com/

Answer 2

Here is some code that I hope it will help you understand and use on your website:

http://jsfiddle.net/dragulceo/KMnmb/1/

Notice that I included an external link to a jQuery plugin - jQuery throttle / debounce

You need to register a scroll handler and because the scroll handler is triggered many times you should use throttle method so that you don't affect the scrolling speed (avoid hiccups).

onScrollCallback = $.throttle(250, function () {
    var el;
    floatNavs.find('a.active').removeClass('active');
    el = getVisibleElement();
    if(el) {
        floatNavs.find('a[href="#' + $(el).attr('id') + '"]').addClass('active');
    }
});
$(document).on('scroll', onScrollCallback);

So now the browser triggers scroll event the code - moderately - will check to see which div is on screen and then add the active class for the a element that has the target the same with the id attribute.

The function that finds the element on screen is this one:

//gets the div on screen
getVisibleElement = function () {
    var scrl = window.scrollY,
        height = jQuery(window).height(),
        elHeight,
        i;
    for (i = 0; i< numberEls; i++) {
        item = $(targetEls[i]);
        pos = item.position();
        elHeight = item.height();
        // the criteria if the element is on screen is that 
        // the topX position is greater then the scrolled pixels 
        // minus half of the element. There can be variations 
        // depending on the scrolled items
        if (pos.top > scrl - elHeight / 2) {
            return targetEls[i];
        }
    }
    return false;
}

And as you can see in the comments you can play with or change the condition that determines when the element is on screen depending on the height of the scrolled elements.