Change Active Menu Item on Page Scroll?

Question

I want to activate the menu item when I get to it's corresponding section. I got inspired by this previous SO question: Change Active Menu Item on Page Scroll? .

but the difference is that in my menu I have a little image over each menu item, that shows only if I hover the menu item, and hides when don't.

HTML

<nav>
        <ul id="pics">
          <a href="#def"><li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li></a>
          <a href="#program"><li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li></a>
          <a href="#testi"><li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li></a>
          <a href="#contact"><li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li></a>
        </ul>
    </nav>

CSS

.vishid{
    visibility: hidden;
}

.visvis{
    visibility:visible;
}

JAVASCRIPT (to show and hide images when hovering items)

$(document).ready(function(){
$("#text-what").hover(function(){
    $("#pic-what").addClass('visvis');
},function(){
    $("#pic-what").removeClass('visvis');
});

$("#text-training").hover(function(){
    $("#pic-training").addClass('visvis');
},function(){
    $("#pic-training").removeClass('visvis');
});

$("#text-testi").hover(function(){
    $("#pic-testi").addClass('visvis');
},function(){
    $("#pic-testi").removeClass('visvis');
});

$("#text-contact").hover(function(){
    $("#pic-contact").addClass('visvis');
},function(){
    $("#pic-contact").removeClass('visvis');
});
});

I want to show the image when I am at it's corresponding section. How can I do that with javascript?

Answer 1

There is a lot going on here. Your HTML should technically be corrected. href's should not encapsulte LI's. Instead your href should be set to block - width and height 100% - within the LI. Let's also move the class of .vishid to the parent LI. That way if you want it to effect anything else - besides just the images - in the future, it would be easy to add. So that would look like:

<nav>
    <ul id="pics">
        <li id="text-what" class="vishid"><a href="#def"><img src="images/what.png" id="pic-what"><p>item1</p><</a>/li>
        <li id="text-training" class="vishid"><a href="#program"><img src="images/training.png" id="pic-training"><p>item2</p></a></li>
        <li id="text-testi" class="vishid"><a href="#testi"><img src="images/trait.png" id="pic-testi"><p>item3</p></a></li>
        <li id="text-contact" class="vishid"><a href="#contact"><img src="images/contact.gif" id="pic-contact"><p>item4</p></a></li><
    </ul>
</nav>

Then you need to adjust your CSS to correct for the "non-block" level href.

#pics li a {
    display: block;
    width: 100%;
    height: 100%;
}

.vishid img {
    visibility: hidden;
}

.visvis img {
    visibility: visible;
}

Finally, I am going to assume that you are using "articles" in your HTML for the sections. Doesn't have to be, but that is what my example will assume.

var clickScroll = false,
    triggerHighlight = 80; // distance from the top to trigger action

$(window).scroll(function () {

    var y = $(this).scrollTop(),
        yCatch = y + triggerHighlight;

    // Let's wrap in a variable check. Set this to tru is clicking on navigation
    // false if simply scrolling
    if (!clickScroll) {
        $('article').each(function (i) {
            var whichArticle = $(this).attr('id');

            if ($(this).position().top < yCatch) {
                var currentArticle = "#" + whichArticle;
                adjustSubNav(currentArticle);
            }
        });
    }

});

function adjustSubNav(l) {
    $('#pics a').each(function (i) {
        if ($(this).attr('href') == l) {    // Add active class to the corresponding menu item
            $(this).parent('li').removeClass('vishid').addClass('visvis');
        } else {
            $(this).parent('li').removeClass('visvis').addClass('vishid');
        }
    });
}