Wie links Spalte fixiert und rechts in Bootstrap 4 scrollbar, reagiert?

Question

Ich benutze Angular 4, Bootstrap 4 und versuche ein festes scrollbares rechtes div und ein festes linkes div zu implementieren. Es sollte sehr ähnlich zu dem, was Trulia hat.

Bootstrap hat das Affix jQuery-Plugin in Version 4 gelöscht, so dass diese Methode nicht mehr gültig ist, sie empfehlen, position: sticky zu verwenden, aber ich kann es nicht zum Laufen bringen.

Bitte helfen!

index.html

<div class="container-fluid"> 
    <div class="row h-100"> 
    <div class="col-md-6"> 
     <div id="left-container"> 
     <div class="search-property"> 
      <input type="text"> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div id="right-container"> 
     <app-home-right></app-home-right> 
     </div> 
    </div> 
    </div> 
</div> 

style.css

#left-container { 
    height: 100%; 

    position: fixed; 
    width: inherit; 
} 

#right-container { 
    position: absolute; 
} 

.search-property { 
    position: relative; 
    top: 50%; 
    transform: perspective(1px) translateY(-50%); 
    margin-left: 50%; 
} 

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
} 

.border { 
    border: 1px solid black; 
} 

Answer 1

Ich bin mir nicht sicher, ob Sie einfach ein Layout mit 1 festen Seite möchten, oder für die Seite festgelegt werden, bis es erreicht der Fuß (wie Trulia).

Hier ist ein einfaches Layout mit fester linker Seite (Split 50 50).

body, html { 
    height: 100%; 
} 

#left { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
} 

https://www.codeply.com/go/IuOp3nvCpy

Um die Seite fixiert (oder klebrig) an einem bestimmten Punkt nur zu machen, position:sticky in allen Browsern sehr gut funktioniert nicht. Ich würde ein Plugin oder polyfill verwenden, wie hier erklärt: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

---

Ähnliche mit fixed col on right side