I'm currently working on a page layout that consists of a fixed sidebar on the left side and a main container taking up the rest of the page on the right. Inside this right-side container, which is a div, there are 2 elements.
<div class="col-sm-12 col-md-5 col-lg-3">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
Because the content in the second div is long, scrolling is necessary. I attempted to make the first div sticky by applying position:fixed to it in css. However, this removes it from the context of the right side container, causing the responsive width classes to no longer work properly. Additionally, the two divs overlap.
In an effort to find a cleaner solution, I came up with using a dummy div like so:
<div class="col-sm-12 col-md-5 col-lg-3 dummy-div">
</div>
<div class="col-sm-12 col-md-5 col-lg-3 sticky-div">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
My idea was to create an element directive that utilizes jQuery to set the width of the sticky-div to match the width of the dummy-div. However, I still feel this isn't the most elegant solution and am wondering if there is a better way to handle this scenario?