有没有办法在滚动上输入任何部分元素时更改固定元素样式

Question

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

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

谢谢

Answer 1

最简单的方法是让固定按钮的背景颜色在所有部分看起来都不错。这样你就可以只设计它并让它独立。

如果你必须在不同的部分改变颜色，有几种方法可以做到，none很简单，只有少数几种会有很好的效果。

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

将 fixed 按钮的背景设为默认颜色。
添加一个 class 修饰符，这样当您添加一个 class 时，它会将样式更改为新颜色。 示例：.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. 添加滚动监听器
在滚动侦听器中观察 currentTarget 的 bounds.bottom 以查看它应该是哪种颜色。
然后在Intersection Observer中，如果不再相交，移除scroll listener以防止内存泄漏。

这是一个工作示例。

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>

Answer 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";
    }
  }
})

}

有没有办法在滚动上输入任何部分元素时更改固定元素样式

is there a way to change fixed element style when enter any section element on scroll

html

javascript

css

jquery

scroll

最简单的方法是让固定按钮的背景颜色在所有部分看起来都不错。这样你就可以只设计它并让它独立。

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

这是一个工作示例。