jQuery Forum

Hello everyone,

So my question is the following :


My personnal website is divided into sections that are colored with different contrasts, so as I scroll past a certain section, I need my fixed menu to change its color css property.


At first I tried to use boundingClientRect.top this way :

1. 
   
2. $(function(){
3. 
   
4. var projetTop = $("#projects")[0].getBoundingClientRect().top;
5. 
   
6. var menuTop = $("nav")[0].getBoundingClientRect().top;
7. 
   
8. $(window).scroll(function(){
9. 
   
10. var calc = projetTop-menuTop;
11. 
    
12. if(calc<0){
13. 
    
14. $("nav a").css("color","#F6F2ED");
15. 
    
16. }
17. else{
18. 
    
19. $("nav a").css("color","#696765");
20. 
    
21. }
22. });
23. 
    
24. });

But it doesn't seem to work really well...


Actually, the section I'm talking about is one of the last sections on the site, and the color changing happens immediately after I start scrolling first.


Do you guys have any solutions for this problem ?


thank you very much for your future answers, and pardon my english, I'm from France ^^