Side bar with Way points - html

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><i class="fa fa-archive fa-2x"></i></li>
<hr />
<li><i class="fa fa-globe fa-spin fa-2x"></i></li>
<hr />
<li><i class="fa fa-user-plus fa-2x"></i></li>
<hr />
<li><i class="fa fa-mars-stroke fa-2x"></i></li>
<hr />
<li><i class="fa fa-envelope fa-2x"></i></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.
p.s 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>
item1
</li>
<li>
item2
</li>
<li>
item3
</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>