Wie ein div nur innerhalb eines div behoben haben und in die Position ändern: absolute, wenn es mit folgenden div

Question

überlappende beginnt sagen, dass ich drei divs wie folgt haben:

<div class="wrapper"> 
    <div class="container"> 
     container1 
     <div class="element"> 
      fixed 
     </div> 
    </div> 
    <div class="container2"> 
     container2 
    </div> 
</div> 

Ich möchte div: element festgelegt werden, wenn Es ist innerhalb div: container, aber seine Position sollte absolute werden, wenn div: container2 wird sichtbar, sollte es nicht mit div überlappen - container2, aber scrollen Sie zu der Zeit mit div: container.

Eine reine CSS-Lösung ist vorzuziehen, aber wenn nicht, kann ich eine JS- oder Jquery-Lösung wählen. Ich habe eine fiddle für this erstellt, und versuchte eine Lösung vorgeschlagen here, die nicht funktionieren.

Answer 1

Sie suchen nach einem Sticky Header. Es gibt derzeit keine Möglichkeit, einen Header an einer beliebigen Scroll-Position mit reinem CSS zu fixieren - dafür müssen Sie in eine JavaScript-Lösung schauen.

Answer 2

Was würde ich vorschlagen, ist Javascript zu verwenden zu erkennen, wenn das Scrollen mit window.pageYOffset an einem bestimmten Punkt ist

Wenn es erreicht die gewünschten Fenster Y Offset können Sie ein Ereignis starten, der den CSS-Wert von dem modifiziert Positionierung von absoluten fixiert (durch den übergeordneten Container auf die relative Einstellung) und unten auf 0

Schauen Sie sich diese jsfiddle https://jsfiddle.net/zq0kkkcx/2/

auch dieses ist der Code, den ich spreche:

document.addEventListener("scroll", function(event) { 
     if(window.pageYOffset >= 1200){ 
      console.log("1200"); 
      // this is where you want your element to become absolute 
      // positioned to his parent container 
      // write your css changes here and apply them to elements 
      // add relative to container and absolute with bottom 0 to element 
     } if (window.pageYOffset <= 1200){ 
      console.log("<1200"); 
     } 
    }); 

Answer 3

Ja, es ist 100% möglich, dies ohne JavaScript zu tun

ich Ihre aktualisierten fiddle

Markup wie diese

<div class="wrapper"> 
    <div class="outer-scroller"> 
    <div class="scroll-container"> 
     container1 
     <div class="fixed-header"> 
     fixed 
     </div> 
    </div> 
    </div> 
    <div class="last-container"> 
    container2 
    </div> 
</div> 

und CSS sollten

.wrapper { 
    width: 100%; 
    height: 300px; 
} 

.outer-scroller { 
    height: 140px; 
    overflow-y: scroll; 
} 

.scroll-container { 
    padding-top: 70px; 
    width: 300px; 
    height: 1200px; 
    background: #CCC; 
} 

.last-container { 
    width: 300px; 
    height: 600px; 
    background: #FCF; 
} 

.fixed-header { 
    background: #F2F2F2; 
    position: absolute; 
    width: 300px; 
    height: 70px; 
    top: 0; 
    pointer-events: none; 
} 

---

Sie werden sehen, ich habe eine outer-scroller div hinzugefügt.

Das nächste Bit CSS leicht

Die neue outer-scroller div verändert ist das Doppelte der Höhe Ihres fixed-header (für die Zwecke dieses Beispiels) und eine overflow-y: scroll drauf hat.

Der Container darin ist immer noch gleich.

Die nächste Änderung besteht darin, Ihre position: fixed in eine position: absolute umzuwandeln und anschließend den oberen Teil des zu scrollenden div-Eintrags einzufügen, um den Inhalt "unterhalb" des neuen "fixierten" Headers zu verschieben.

Scrollen über das outer-scroller div macht dann seinen Inhalt Bildlauf, und weil seine Höhe mit einem absoluten Element oben gesetzt ist, scrollt es dann "unter" dem festen Header.

Sobald der unterste Inhalt scroll-container erreicht ist, scrollt die ganze Seite weiter, und Sie erhalten die Illusion, dass der Header verschwindet.

Das letzte Bit ist pointer-events: none auf den Kopf, so dass er nicht frei bewegen, wenn der Cursor darüber ist (aber das div tut unten)

Answer 4

Wenn Sie eine CSS-Lösung wollen, hier ist ein Trick, den Sie kann mit z-index tun. Ansonsten gibt es eine JS-Lösung.

.wrapper { 
 
    width:100% 
 
} 
 
.container { 
 
    width:300px; 
 
    margin:0 auto; 
 
    height:1200px; 
 
    background:#ccc; 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 

 
.container2{ 
 
    width:300px; 
 
    margin:0 auto; 
 
    height:1200px; 
 
    background:#fcf; 
 
    z-index: 1; 
 
} 
 
.element { 
 
    background:#f2f2f2; 
 
    position:fixed; 
 
    width:50px; 
 
    height:70px; 
 
    margin-left:250px; 
 
    border:0px solid #d6d6d6; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    container1 
 
    <div class="element"> 
 
     fixed 
 
    </div> 
 
    </div> 
 
    <div class="container2"> 
 
    container2 
 
    </div> 
 
</div>