在滚动上输入任何部分元素时，有没有办法改变固定元素的样式答案

【问题标题】：is there a way to change fixed element style when enter any section element on scroll在滚动上输入任何部分元素时，有没有办法改变固定元素的样式
【发布时间】：2022-01-15 17:10:39
【问题描述】：

我有一个聊天或转到顶部带有白色边框的 svg btn，我的一些部分元素有蓝色和其他白色背景

我想要做的是当固定 btn 在滚动时进入该部分时检查其背景并在每种情况下添加不同的类。我怎样才能在 javascript 或 jquery 中做到这一点？

谢谢

【问题讨论】：

标签： javascript html jquery css scroll

【解决方案1】：

最简单的做法是让固定按钮的背景颜色在所有部分都看起来不错。这样一来，您就可以对其进行样式设置，而不必理会它。

如果你必须在不同的部分改变颜色，有几种方法可以做到，没有一种是容易的，只有少数会有很好的性能。

我能想到的最好的方法是：

将fixed 按钮的背景设为默认颜色。
添加一个类修饰符，这样当您添加一个类时，它会将样式更改为新颜色。 示例：.button 变为 .button.red
在每个必须更改按钮背景的部分，添加自定义data-attribute 示例：<section change-button-bg="red">
然后on load
1. 设置一个.querySelectorAll(*[change-button-bg])，这样你就可以运行了检查每个部分。
2. 添加一个名为currentTarget的全局变量
3. 在所有部分设置Intersection Observer。
让.isIntersecting 的回调函数做一些事情。
1. 更新currentTaget 变量
2. 更新按钮颜色
3. 添加滚动监听器
在滚动监听器中观察 bounds.bottom 或 currentTarget 以查看它应该是哪种颜色。
然后在 Intersection Observer 中，如果不再相交，请移除滚动侦听器以防止内存泄漏。

这是一个工作示例。

window.addEventListener('load', (event) => {
  const changeBG = document.querySelectorAll('*[change-button-bg]');
  let currentTarget = null;
  
  const Observer = new IntersectionObserver((entries, Observer) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        currentTarget = entry.target;
        addColor(true);
        window.addEventListener('scroll', watchTarget);
      } else {
        addColor(false);
        window.removeEventListener('scroll', watchTarget)
      }
    }
  }, {threshold: 0.15});

  for (const element of changeBG) {
    Observer.observe(element);
  }
  
  function watchTarget() {
    const bounds = currentTarget.getBoundingClientRect();
    
    if (bounds.bottom < window.innerHeight - 80) {
        addColor(false);
    } else {
      addColor(true);
    }
  }
  
  function addColor(add) {
    const btn = document.getElementById('button');
    if (add) {
      btn.classList.add('red');
    } else {
      btn.classList.remove('red');
    }    
  }
  
});

body {
  margin: 0;
}
section {
  width: 100vw;
  height: 100vh;
  background: red;
}

section:nth-child(even) {
  background: blue;
}

button {
  position:fixed;
  right: 50px;
  bottom: 50px;
  padding: 15px 25px;
  border: none;
  color: white;
  background-color: blue;
  cursor: pointer;
}

button.red {
  background-color: red;
}

<html>
  <body>
    <section></section>
    <section change-button-bg="red"></section>
    <section></section>
    <section change-button-bg="red"></section>
    <section></section>
    <button id="button">Top</button>
  </body>
</html>

【讨论】：

感谢先生，它的工作非常好，但我有一个问题，它在向上滚动时不起作用
@yahyahaddad 你能和我分享一下它在 CodePen 中不起作用的地方吗？

【解决方案2】：

这是我正在寻找的解决方案，我使用 Intersection Observer 完成了它

   document.addEventListener('DOMContentLoaded',()=>{
    let options = {
      root:null,
      rootMargin:"-570px 0px -100px 0px",
      threshold:0.05

    };

  let Observer= new IntersectionObserver(changColor,options);
    document.querySelectorAll("section").forEach(section => {
      Observer.observe(section);
    });
  });


function changColor(elements) {
elements.forEach(el => {
   if (el.isIntersecting) {
    let elbg=el.target.dataset.bg;
 
    if (elbg=="blue") { //if section data-bg== blue
     
      // change svg button style
         document.getElementById("chatting_path_7").style.fill = "#fff";
         document.getElementById("to_top_Ellipse_4").style.stroke = "#fff";
    } else {
        document.getElementById("chatting_path_7").style.fill = "#034ea2";
        document.getElementById("to_top_Ellipse_4").style.stroke = "#034ea2";
    }
  }
})

}

【讨论】：