スクロールに基づいて私のdivコンテナの位置を変更します

Question

私は実際に私のアプリをスタイリングしています。私は私のヘッダーとフッターの間にコンテナを持っています。私はページをスクロールするとき、コンテナがヘッダーを満たしていて、相対的な位置から固定された位置に変えたいと思っています。

初期設定：

.div { 
     position: relative; 
     zoom: 1; 
     z-index: auto; 
    } 

のdivコンテナは、私はdiv要素の位置が固定に変更するヘッダー新しいしたら。

.div { 
     position: fixed; 
     zoom: 1; 
     z-index: 1; 
     top: 0px; 
     padding-top: 10px; 
     left: 400px; 
    } 

どうすればよいですか？私を助けることができます。

ありがとうございました。あなたのコンテナの

Answer 1

使用onscroll：

<div class="div" id="content" onscroll="onScroll()"> 
... 
<div id="container"></div> 
... 
</div> 

JavaScriptを使用して、コンテナがヘッダか満たしているかどうかを確認する必要があります。

function onScroll() { 
    var content = document.getElementById('content'); 
    var container = document.getElementById('container'); 
    var scrollTop = content.scrollTop; 
    var elOffsetTop = container.offsetTop; 
    var elHeight = container.offsetHeight; 
    if ((scrollTop > elOffsetTop)&&(scrollTop<elOffsetTop+elHeight)) { 
     content.classList.add("on-top"); 
    } else { 
     content.classList.remove("on-top"); 
    } 
    } 

とCSSで：

.on-top { 
    position: fixed; 
    ... 
} 

を

ここに例があります： https://jsfiddle.net/en7Lf2wz/6/