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

-1

当用户在jQuery中滚动到某个特定div位置时，我试图操纵导航栏的css属性，但到目前为止它不工作。这是我下面做的当用户滚动到某些位置时更改元素的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>

我该如何使这项工作实现我想要的？

来源

2016-04-19 ibnhamza

您有不必要的'}）'在脚本的末尾。 –

如果您不想花费太多时间编码，那么可以使用一个非常漂亮的库来处理这种行为。它被称为'Waypoints' - > https://github.com/imakewebthings/waypoints – TyMayn

http://imakewebthings.com/waypoints/ 您可以使用jQuery航点（反正因为你使用的jQuery的）来实现这一目标
它甚至有滚动方向检测等许多有用的功能
（见例子在http://imakewebthings.com/waypoints/guides/getting-started/）
假设你”重新使用它，代码看起来应该somethiing这样的：

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你应该刚刚更换||与&&，所以限制条件将开始工作

来源

2016-04-19 15:35:02 IdeaMan

我需要做些什么来使我的代码工作？ – ibnhamza

@ibnhamza我使用Waypoints将工作代码添加到了我的答案中，但是如果您想使用您想要知道自己的错误，则必须等待。 – IdeaMan

@ibnhamza完成，你应该使用'和'而不是'或'，因为。 – IdeaMan

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

回答

相关问题