特定のページの場所でdiv cssを変更する

Question

私は、ページがスクロールするときにコンテンツ/画像をオーバーレイするページの上部にボタンを固定する次のコードを持っています。私はボタンが色に#btn CSSの変更、その点に到達したときに 'アンカー' または何かを入れたい

HTML

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

... images ... 

... content ... 

CSS

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

：＃000;

ので、基本的に

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

... images ... 

anchor changing the css 

... content ... 

編集：私は、私は私はベースのJavaScriptを持っていると思う上部または下部

Answer 1

からの距離を知らない私によって制御されていないコンテンツや画像の量あなたのための解決策。 私は、これはあなたが任意のCSSフレームワークを使用している

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

window.onscroll=function(){ 
 
\t 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>