How to leave a column fixed and scrollable right in Bootstrap 4, responsive?

Question

I am using Angular 4, Bootstrap 4 and trying to implement a fixed scrollable right div and a fixed left div. It should be very similar to what Trulia has.

Bootstrap dropped the Affix jQuery plugin in version 4, so this method is no longer valid, they recommend using the position: sticky, but I can't get it to work.

Please, help!

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

I'm not sure if you just need a layout with 1 fixed side, or for the side to be locked until it reaches the footer (e.g. Trulia).

Here is a simple layout with a fixed left side (Split 50 50).

 body, html { height: 100%; } #left { position: fixed; top: 0; bottom: 0; } 

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

To make the side stationary (or sticky) only at a certain point, position:sticky does not work very well in all browsers. I would use a plugin or polyfill as described here: How to use CSS position to keep sidebar visible with Bootstrap 4

Bootstrap 4.0.0 Update

Now additional css for position:fixed not needed, and the fixed-top class can be used in the columns on the left.

---

Similarly fixed col on the right side