Changing a css property after a certain scroll position.

Changing a css property after a certain scroll position.

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 :


  2. $(function(){

  4. var projetTop = $("#projects")[0].getBoundingClientRect().top;

  6. var menuTop = $("nav")[0].getBoundingClientRect().top;

  8. $(window).scroll(function(){

  10. var calc = projetTop-menuTop;

  12. if(calc<0){

  14. $("nav a").css("color","#F6F2ED");

  16. }
  17. else{

  19. $("nav a").css("color","#696765");

  21. }
  22. });

  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 ^^