更改特定页面位置的div css

Question

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

HTML

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

... images ...

... content ...

CSS

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

我想放一个＆＃39;锚点＆＃39;当按钮到达该点时，＃btn css变为颜色：＃000;

基本上

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

... images ...

anchor changing the css 

... content ...

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

Answer 1

我想我有一个基于javascript的解决方案。 我希望这会有所帮助

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

＆＃13;

＆＃13;

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';
  }
}

＆＃13;

#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;
}

＆＃13;

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

</div>
</div>

＆＃13;

＆＃13;

＆＃13;