On my single-page site im using the WP-float plugin to display a couple of images with onmouseover and onmouseout effect. Now im looking for some code that will keep the img clicked into the mouseover state as long as the viewer is within a certain range on the screen.

In other words, i want a dot navigation but instead of dots, use images.

For the dot navigation i use THIS solution, but somehow i cant get it to work.
$(document).ready(function($){
var parPosition = [];
$(‘.par’).each(function() {
parPosition.push($(this).offset().top);
});

    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });
    $(document).on('scroll', function() {
        var position = $(document).scrollTop(),
            index;
        for (var i=0; i<parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }
        }
        $('.navigation ul li a').removeClass('active');
        $('.navigation ul li a:eq('+index+')').addClass('active');
    });
        $('.navigation ul li a').click(function () {
        $('.navigation ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});

To see my problem and the idea behind the image icons check www.on-lijn.nl/meubelnaarwens/

Read more here: Single Page Navigation Issues


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , ,

Wordpress related questions and answers: