I am looking to design a FAQ page similar to Twitter's FAQ. The goal is to have the left column remain fixed in its position while allowing users to scroll through the content.
Here is what I have attempted so far, but it is not functioning as expected.
<template>
<div>header here</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div style="position: sticky;">
1 of 2
</div>
</div>
<div class="col-lg-8">
2 of 2
</div>
</div>
</div>
</template>
Although suggestions from this source propose using the sticky property, it does not seem to be effective in my case.
Upon further consideration, I believe the issue may arise from both columns having equal height. As a result, applying the sticky property does not produce the desired effect. Is there a solution that would allow the column height to adjust based on content?
Are there any recommendations or solutions available? Thank you!!