javascript - 如何在特定滚动位置多次添加/删除类/id？

Question

我有一个标题，我想在向下滚动到某个点时添加一个不同的类。这适用于第一个类，但是当我尝试在不同的点上添加另一个时，它不起作用。我的标题是固定的，我想在两个不同的滚动点更改它的背景两次。

我该怎么做？

我有一个 fiddle ，它显示了我想要的东西？请用能用的 fiddle 回答我。谢谢。

http://jsfiddle.net/madsrhn12/6q3btjs7/

.div1 {
width:100%;
height:500px;
position: absolute;
top:0px;
left:0px;
background-color: green;           
}

.div2 {
width:100%;
height:500px;
position: absolute;
top:500px;
left:0px;
background-color: red;           
}

.div3 {
width:100%;
height:1500px;
position: absolute;
top:1000px;
left:0px;
background-color: blue;           
}

.div-header {
width:100%;
height:50px;
position:fixed;
top:0px;
left:0px;
background-color: blue;
}

.div-header2 {
 background-color:black;
}

.div-header3 {
background-color:yellow;
}






var num =500; 

$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {        
     $('.div-header').addClass('div-header2');
} else {
    $('.div-header').removeClass('div-header2')
}

});//not working, dont know why... Hope you get the idea though.



var num =1000; 

$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {        
     $('.div-header').addClass('div-header3');
} else {
    $('.div-header').removeClass('div-header3')
}

});//I cant figure this one out. How do i get two different headers, on a different positon (var            num =1000) // than the allready styled, and working (var num =500;)?

Answer 1

关键问题是您的脚本中只有一个名为num 的变量。这条线……

var num = 500;

.. 定义它，而这个...

var num = 1000;

... 只是为该变量分配一个不同的值，var 部分被忽略。所以所有使用 num 的函数都将使用这个新值；旧的现在完全被遗忘了。

最简单的方法就是创建另一个变量(如 num2)并使用它，但这是一条通往无路可走的道路。相反，调整值存储(当您存储两个相关元素时，它应该是一个集合；数组是最简单的)和滚动处理程序——不要使用两个，只需制作一个内部有 fork 的处理程序。例如:

var margins = [
   $('.div3').offset().top - $('.div-header').height(), 
   $('.div2').offset().top - $('.div-header').height()
];

var $window = $(window);
$window.on('scroll', function() {
  var scrollTop = $window.scrollTop();
  var $header = $('.div-header');
  $header.removeClass('div-header2 div-header3');
  if (scrollTop >= margins[0]) {
    $header.addClass('div-header2');
  }
  else if (scrollTop >= margins[1]) {
    $header.addClass('div-header3');
  }
});

Demo

作为旁注，我宁愿让滚动事件处理程序去抖动，这样它只会在用户停止滚动时触发。