Change CSS Properties of an Element when User Scrolls to certain positions

Question

I was trying to manipulate the css properties of my nav bar when user scrolls to some specific div position in jquery but so far it's not working. This is what i did below

<nav class="topnav"></nav> //position:fixed
<section id="aboutus></section>
<section id="members></section>
<section id="events></section>

what i did was to get the scroll position of the user and also get the position of the elements whose positions i'm targeting. After which I set up an event listener to check if the scroll position is equal to or greater than the position of the target element which i then change the background color.

<script>
var events = $("#events");
  var eventsHeight = events.height();//get div height
  var eventsDivOffset = events.offset().top;//get div position

  var aboutUs = $("#aboutus");
  var aboutUsHeight = aboutUs.height();//get div height
  var aboutUsDivOffset = aboutUs.offset().top;//get div position
  var members = $("#members");
  var membersHeight = members.height(); //get div height
  var membersDivOffset = members.offset().top; //get div position
  var currentScrollPos = window.pageYOffset; //get scroll position
    function yScroll(){
      var currentScrollPos = window.pageYOffset;
       if(currentScrollPos >= aboutUsDivOffset || currentScrollPos <= aboutUsDivOffset + aboutUsHeight){
        $(".topnav").css({"background-color":"white"});
      }
      else if(currentScrollPos >= eventsDivOffset || currentScrollPos <= eventsDivOffset + eventsHeight){
        $(".topnav").css({"background-color":"red"});
      }
      else if(currentScrollPos >= membersDivOffset || currentScrollPos <= membersDivOffset + membersHeight){
        $(".topnav").css({"background-color":"red"});
      }
      else{
        $(".topnav").css({"background-color":" "});
      }
    }
    window.addEventListener("scroll", yScroll);  
    })
    </script>

How can i make this work to achieve what i want?

Answer 1

http://imakewebthings.com/waypoints/ You can use JQuery Waypoints to achive this (since youre using jquery anyway)
It even has scroll direction detection and many other usefull features
(see examples at http://imakewebthings.com/waypoints/guides/getting-started/ )
Assuming that you're using it, the code should look somethiing like this:

JSFiddle with working code

   var waypoint = new Waypoint({
      element: document.getElementById('aboutus'),
      handler: function(direction) {
         if(direction=== 'down'){
                $(.topnav).addClass(fixed);
         }
         else if(direction === 'up'){
                 $(.topnav).removeClass(fixed);
         }

      }
    })

EDIT

OK, i fixed it You should've just replaced || with && , so limiting conditions would start working