I currently have a layout with two columns structured like this:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
</div>
</div>
By applying the position:sticky to the sidebar column, I achieved the sticky behavior for the sidebar. You can see it in action here: https://codepen.io/marcanuy/pen/YWYZEp
CSS:
.sticky {
position: sticky;
top: 10px;
}
HTML:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4 sticky">
</div>
</div>
However, when I applied the sticky property only to the menu within the sidebar, aiming to keep the related articles section scrollable while also making the menu div sticky, it did not work as expected:
<div class="row">
<div class="col-xs-8 content">
</div>
<div class="col-xs-4">
<div class="menu sticky">
</div>
</div>
</div>
You can visualize the difference in behavior between the two scenarios in this screencast:
https://i.sstatic.net/wYJDo.gif
Bootstrap 4 now recommends using the sticky property since support for the Affix jQuery plugin has been dropped:
Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead.
My experiments were conducted on:
Firefox 47.0 with
css.sticky.enabled=“true”underabout:configChrome 50.0.2661.94 (64-bit) with
enabled inexperimental Web Platform featureschrome://flags
(This question is not similar to How to make a sticky sidebar in Bootstrap? because it pertains to BS affix)