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 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);
         }

      }
    })

修改

OK, i fixed it您应该将||替换为&&，因此限制条件将开始工作

当用户滚动到某些位置时，更改元素的CSS属性

1 个答案: