how to make bootstrap column sticky while scrolling

Question

I want to create a faq page like Twitter's FAQ. The left column stays on that position even though the user keep scrolling.

So far here's what I made but it doesn't work.

    <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>

According to this, we should add sticky property, but it doesn't work.

edit: I think it's because the two columns have the same height, so adding sticky property does not work. Any solutions on how to make the column height fit to the content only?

Any solution? Thank you!!

can you tell me the version of bootstrap that you are using? — Muhammad Tahseen ur Rehman, Apr 26 '21 at 08:23
https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work — Danielprabhakaran N, Apr 26 '21 at 08:26

Harry Loat · Accepted Answer · 2021-04-26T08:50:18.630

1

Position Sticky is not working on col-sm-4 because its parent class row has display:flex property. if you change

display:flex

to

display:block

then position Sticky property will work but it will change your design

edited Apr 26 '21 at 08:50

answered Apr 26 '21 at 08:27

Harry Loat

67
6

I've tried it and it does not work. I've also edited my question, maybe you might want to take a look. Thanks btw! – jade Apr 26 '21 at 08:32
I edited the answer. I hope this will work for you – Harry Loat Apr 26 '21 at 08:52
1

"but it will change your design" so it's not an answer then :)) – Wassim Katbey Mar 03 '22 at 22:42

how to make bootstrap column sticky while scrolling

1 Answers1