如何在每次滚动时更改元素颜色

How to change element color each time scrolling

本文关键字：元素 颜色 滚动      更新时间：2023-09-26

我想在访问者每次滚动x个像素时输出数组的一个项目。

目前我想出了这个代码。但是当我只想输出某个项目时，我陷入了困境。

我想在每次有人滚动 10 像素时输出数组的另一个项目。

$(document).scroll(function() {
  var array = ["1", "2", "3", "4"];
  var currentArray = 0;
  function changeColor() {
    currentArray++;
    if(currentArray > 139) {
      currentArray = 0;
    }
  }
  for (var i = 0; i < 1; i++) {
    console.log(array[currentArray]);
  }
});


var arr = [1, 2, 3, 4, 5, 6, 7, 8];
document.onscroll = function() {
  var el = parseInt(window.scrollY / 250);
  if (el <= arr.length) {
    document.getElementsByTagName('p')[0].textContent += arr[el];
    arr[el] = '';
  }
}
html,
body {
  height: 200%;
}
p {
  position: fixed;
}
<p></p>

在上面的方法中，您在每次滚动时输出数组元素，除了每次打印后，您清除数组中的该位置，因此输出空白字符串（丑陋的黑客，但我只是想向您展示大致的想法）。

更改parseInt(window.scrollY / 250)中的250以更改步骤。

我希望您能够将这种方法应用于您的需求。

使用 .scrollTop() 方法：

if( $(document).scrollTop() > 10 ) {
    // do something
}
if ( $(document).scrollTop() > 20 ) {
    // do something
}
相关文章：