Could anyone provide some assistance or guidance on how to solve a small issue I'm facing?
I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.)
Here is a fiddle link for reference: http://jsfiddle.net/iBertel/ah2zj/6/
I need the fixed-nav text to dynamically adjust based on the current position.
EDIT: I have made changes to the fiddle, so it should make more sense now.
HTML
<div class="page-wrap">
<div class="fixed-nav">
<span>Position 1</span>
</div>
<div id="position1" class="link">
page 1
</div>
<div id="position2" class="link">
page 2
</div>
<div id="position3" class="link">
page 3
</div>
<div id="position4" class="link">
page 4
</div>
</div>
CSS
html, body {
width:100%;
height:100%;
}
.page-wrap {
width:100%;
height:100%;
position:relative;
}
.fixed-nav {
position:fixed;
top:50px;
left:50px;
width:100px;
height:50px;
background-color:#CCC;
}
.link {
width:100%;
height:100%;
border-top:1px solid #F20;
}
JQUERY
No jQuery code yet - I am unsure where to begin with this.
I hope someone can assist me or point me in the right direction to find a solution to this problem.
Thank you for taking the time to read this. Cheers!