xxx

by lovromar

HTML

<ul id="nav">
    <li id="link1"><a href="#">Link 1</a></li>
    <li id="link2"><a href="#">Link 2</a></li>
    <li id="link3"><a href="#">Link 3</a></li>
    <li id="link4"><a href="#">Link 4</a></li>
</ul>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

CSS

*{
    margin:0;
}
#nav {
    position: fixed;
    list-style-type: none;
}
#nav a{
    text-decoration: none;
    color: orange;
}

#a{
    width: 100%;
    height: 600px;
    background: lightgreen 
}

#b{
    width: 100%;
    height: 200px;
    background: orange; 
}

#c{
    width: 100%;
    height: 400px;
    background: purple
}

JavaScript

var b=$('#b').offset(); 
var c=$('#c').offset();


$(window).scroll(function(){

  
if($(window).scrollTop()+$('#nav').height()>=b.top+10 && $(window).scrollTop()+$('#nav').height()<c.top+10)
{
    $('#link4 a').css('color','green');
}
    
else if($(window).scrollTop()<b.top+70)
{
    $('#link4 a').css('color','orange');
}

else if($(window).scrollTop()+$('#nav').height()>=c.top+10)
{
    //alert('afafa')
  $('#link4 a').css('color','orange');      
}

    
if($(window).scrollTop()+$('#nav').height()>=b.top+30 && $(window).scrollTop()+$('#nav').height()<c.top+30)
{
    $('#link3 a').css('color','green');
}
    
else if($(window).scrollTop()<b.top+50)
{
    $('#link3 a').css('color','orange');
}

else if($(window).scrollTop()+$('#nav').height()>=c.top+30)
{
  
  $('#link3 a').css('color','orange');      
}

    
if($(window).scrollTop()+$('#nav').height()>=b.top+50 && $(window).scrollTop()+$('#nav').height()<c.top+50)
{
    $('#link2 a').css('color','green');
}
    
    
else if($(window).scrollTop()<b.top+30)
{
    $('#link2 a').css('color','orange');
}
    
else if($(window).scrollTop()+$('#nav').height()>=c.top+50)
{
  $('#link2 a').css('color','orange');      
}


if ($(window).scrollTop()+$('#nav').height()>=b.top+70 && $(window).scrollTop()+$('#nav').height()<c.top+70)
{
    $('#link1 a').css('color','green');
}
    

else if($(window).scrollTop()<b.top+10)
{
    $('#link1 a').css('color','orange');
}
    
else if($(window).scrollTop()+$('#nav').height()>=c.top+70)
{
    
  $('#link1 a').css('color','orange');      
}
      
});