change hover over menu bar list elements as we scroll down the page

[Kola]

I have a navbar with 6 different list elements like home,about etc. I want each of these li elements to hover as we scroll down through all the sections. I have used isVisible function which tells me if a section is visible in viewport or not….
Following is the code.This code works just fine while scrolling down.

But if we scroll up again then 2 list elements are getting hover effect at the same time whenever two sections are in viewport simultaneously…Please help

var oneElementHasHoverEffect = 0;

   $(window).scroll(function(){
                    if($("#aboutus").isVisible())
                    {
                         if(oneElementHasHoverEffect == 0){
                                  $(".aboutList").addClass("hoverEffect");
                                  oneElementHasHoverEffect = 1;
                    }
                    }
                    else{
                            $(".aboutList").removeClass("hoverEffect");
                              oneElementHasHoverEffect = 0;
                        }



                     if($("#parallax").isVisible())
                    {
                         if(oneElementHasHoverEffect == 0){
                                  $(".thinkList").addClass("hoverEffect");
                                  oneElementHasHoverEffect = 1;
                        }
                    }
                    else{
                            $(".thinkList").removeClass("hoverEffect");
                              oneElementHasHoverEffect = 0;
                        }    


                   if($("#services").isVisible())
                    {
                         if(oneElementHasHoverEffect == 0){
                                  $(".toolList").addClass("hoverEffect");
                                  oneElementHasHoverEffect = 1;
                        }
                    }
                    else{
                            $(".toolList").removeClass("hoverEffect");
                              oneElementHasHoverEffect = 0;
                        }    

      });

[Jimmy]

Not sure about everyone else, but if you could perhaps add a demo of the navigation with your code (or indirect link to the site) it would make things a lot easier to debug.

[Author]

Posts