Ändern Sie die Position meines div-Container basierend auf Bildlauf

Question

Ich style eigentlich meine App. Ich habe Container zwischen meiner Kopfzeile und Fußzeile, wenn ich die Seite blättern, wenn der Container die Kopfzeile erfüllt, möchte ich die Position geändert von relativ zu ändern.

Anfangseinstellung:

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

einmal der div Container ist neu der Header i die Position des div auf feste geändert werden soll.

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

Wie erreiche ich das? kann mir helfen.

danke.

Answer 1

Verwenden onscroll für Behälter:

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

Sie haben Javascript zu verwenden und überprüfen, ob der Behälter den Header oder nicht erfüllt:

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

Und in CSS:

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

Hier ist ein Beispiel: https://jsfiddle.net/en7Lf2wz/6/