Question

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

我该怎么做？

我有一个小提琴，显示我想要的东西？请用工作小提琴回答我。谢谢。

.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

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

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

1 个答案: