当用户滚动到特定位置时更改元素的 CSS 属性

Question

当用户滚动到 jquery 中的某个特定 div 位置时，我试图操纵导航栏的 css 属性，但到目前为止它不起作用。 这是我在下面所做的

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

我所做的是获取用户的滚动位置，并获取我定位的元素的位置。 之后我设置了一个事件侦听器来检查滚动位置是否等于或大于目标元素的位置，然后我更改背景颜色。

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

我怎样才能使这项工作实现我想要的？

Answer 1

http://imakewebthings.com/waypoints/您可以使用 JQuery Waypoints 来实现这一点（因为您无论如何都在使用 jquery）
它甚至具有滚动方向检测和许多其他有用的功能
（参见http://imakewebthings.com/waypoints/guides/getting-started/ 上的示例）
假设您正在使用它，代码应该如下所示：

带有工作代码的 JSFiddle

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

      }
    })

编辑

好的，我修好了你应该刚刚更换了|| 与&& ，所以限制条件将开始工作