当元素到达某个点时更改背景颜色（滚动）（响应）

Question

抱歉各位，我是 Javascript 的新手。在发帖之前我搜索过类似的解决方案。

我想更改背景颜色，每次带有特定 ID 的多个 div 标签在到达浏览器顶部之前到达 150 像素。我希望它能在不同的设备上正常工作。我在 javascript 中尝试了不同的方法，但 none 给了我想要的响应能力。当我减小浏览器的宽度时，文本折叠并且 div/ids 位置发生变化。所以，我的逻辑是……如果，例如，id="One" 的 div 距顶部 150px，请更改背景颜色。

var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");

window.addEventListener('scroll', () => {
  if(one.getBoundingClientRect().top < 150){
    document.body.addClass = "bg-one"; 
  }
});

.site-main{
  background-color: white;
}
.bg-one{
  background-color: red;
}
.bg-two{
  background-color: blue;
}
.bg-three{
  background-color: yellow;
}

<body class="site-main" id="main">
  <div id="one" class="">Text</div>
  <div id="two" class="">Text</div>
  <div id="three" class="">Text</div
</body>

我也想过，但是不行。

Answer 1

我的解决方案是在 window 滚动

上添加事件侦听器

  window.onscroll = function(){ft_onscroll()};

在此函数中，您获取当前滚动位置。将它与您的元素位置进行比较以执行您想要的操作。

one_y = one.getBoundingClientRect().top;
function ft_onscroll(){
    y = window.scrollY;
    if(one_y > y){
       //change background color 
    }
}

Answer 2

我做到了。我的最终代码是这样的。也许我会缩短它。

window.onscroll = function(){
  fromTop_onscroll();
};

function fromTop_onscroll(){
  var main = document.getElementById("main");
  var one = document.getElementById("one");
  one_distance = one.getBoundingClientRect().top; // distance from top
  var two = document.getElementById("two");
  two_distance = two.getBoundingClientRect().top; // distance from top

  if(one_distance < 150 && two_distance > 150){
    main.classList.add("bg-one");
    main.classList.remove("site-main");
    main.classList.remove("bg-two");
  } else if (two_distance < 150 && one_distance < 0) {
    main.classList.add("bg-two");
    main.classList.remove("bg-one");
  } else if (one_distance > 150 && two_distance > 150){
    main.classList.add("site-main");
    main.classList.remove("bg-two");
    main.classList.remove("bg-one");
  }
}

当元素到达某个点时更改背景颜色（滚动）（响应）

Change background colour (scrolling) when an element comes to a certain point (Responsive)

html

tags

background-color

responsive