I'm attempting to replicate the effect of a sticky column positioned to the right of some text, similar to what is seen on the Bootstrap website.
Below is the code I've been working with:
<nav class="col-sm-4 col-md-4" data-spy="affix" data-offset-top="205">
<div class="panel panel-default" >
<div class="panel-heading"><h1>Table of Contents</h1></div>
<section class="panel-body">
<p>
Nullam luctus nisi est, id blandit nunc tristique vel!
</p>
</section>
</div>
</nav>
(There's another bar on the left taking up the 8 previous columns)
Although it somewhat functions as intended - the sidebar appears in the correct place when the page loads and sticks to the top when scrolled up - there's an issue where it shifts to the left, overlaying the left-most column and expanding its width unexpectedly (to around 5 columns wide).
Upon reviewing the documentation, it seems that I need to manually configure the .affix class in the CSS so that it remains in its original position (even though I just want it to stay within the column it originates from). But which values should I use? I attempted this CSS adjustment:
.affix {
top: 20px;
left: 62%;
width: 25%;
}
While this tweaking somewhat resolves the issue (with slight discrepancies in positioning and width), it fails to adapt properly when viewed in different browser window sizes. Does this imply that I must include various media queries? Alternatively, could I compute these widths based on column proportions etc.? I have some basic knowledge of SASS - would utilizing this be a viable option to calculate these dimensions through bootstrap compilation?
Moreover, if anyone can propose how I can indicate which chapter is currently being viewed in the sidebar (similar to the behavior on the Bootstrap site), that would be greatly appreciated!