Side bar with Way points

Question

Hey my name is Kasper!

I'm making a side bar where on my portfolio website, I just learned about #Way points some day's ago.

And now I want to add that to my menu bar, But I can't seem to get it right, this is what my code looks like:

   <!-- /#sidebar-wrapper ----------------------------------------------------------------------->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <div class="menu-links scroll-me">
                    <li class="sidebar-brand">
                        <div href="#">
                            <a href="#header">
                                <img class="ImageFixsTyle" src="assets/img/logsmall.png" alt="SbnLogo" /></a>
                        </div>
                    </li>
                    <hr />
                    <li><a href="#about"><i class="fa fa-archive fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#clients"><i class="fa fa-globe fa-spin fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#NewsLetter"><i class="fa fa-user-plus fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#contact"><i class="fa fa-mars-stroke fa-2x"></i></a></li>
                    <hr />
                    <li><a href="#contactme"><i class="fa fa-envelope fa-2x"></i></a></li>
                    <hr />
                </div>
            </ul>
        </div>
        <!-- /#sidebar-wrapper ----------------------------------------------------------------------->

The Code can be seen in action on : http://kaslabdesign.dk/

now What I want to happen is each time I come to one of my Menu points The menu point we are at needs to be high Lighted.

I have looked at some guides but none of them have anything to do with my specific problem. I hope anyone can help me to solve my problem since i'm soon bald because of this.

have a nice day/evening & thank you for reading this. best regards Kasper.

ps I hope someone can help me ;)! and I hope i explain good enought..

Answer 1

Try using http://imakewebthings.com/waypoints/guides/jquery-zepto/ Handle each block as waypoint and when it is hit, highlight the associated link in the menu. The association is made by the href attribute.

 $(function() { $('p').waypoint({ handler: function(direction) { $("a").css("color", ""); $("a[href='#" + this.element.id + "']").css("color", "red"); } }) }); 

 ul { position:fixed; top:0; left:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script> <ul> <li> <a href="#item1">item1</a> </li> <li> <a href="#item2">item2</a> </li> <li> <a href="#item3">item3</a> </li> </ul> <div> <p id="item1">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p> <p id="item2">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p> <p id="item3">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p> </div>