當用戶滾動到特定位置時更改元素的 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);
         }

      }
    })

編輯

好的，我修好了你應該剛剛更換了|| 與&& ，所以限制條件將開始工作