javascript - 在特定页面位置更改 div css

Question

我有下面的代码，它把一个按钮固定在页面的顶部，当页面滚动时它会覆盖内容/图像。

HTML

<div id="btn">button</div> 

... images ...

... content ...

CSS

#btn { 
  position: fixed;
  z-index: 999;
  color: #fff;
  top: 0; right: 0;
}

我想在按钮到达那个点时放置一个“ anchor ”或其他东西 #btn css 更改为颜色:#000;

本质上是这样

 <div id="btn">button</div> 

... images ...

anchor changing the css 

... content ...

编辑:内容和图片的数量不受我控制，所以我不知道与顶部或底部的距离

Answer 1

我想我有适合您的基于 javascript 的解决方案。我希望这会有所帮助

https://jsfiddle.net/n9ssbL8h/1/

window.onscroll=function(){
	if(document.getElementById('btn').getBoundingClientRect().top>= document.getElementById('header').getBoundingClientRect().top){
  document.getElementById('btn').style.color = '#fff';
  }else{
  document.getElementById('btn').style.color = '#000';
  }
}

#btn { 
  position: fixed;
  z-index: 999;
  top: 0; right: 0;
}
#header{
  margin-top: 100px;
  height: 400px;
  background-color: red;
}
#content{
  height: 400px;
  background-color: green;
}

<div id="body">
<a id="btn">Button </a>
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="images">

</div>
</div>