CODEWITHSUNDEEP
cssvue.jsbootstrap-4scroll
jade
jade

Reputation: 33

how to make bootstrap column sticky while scrolling

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

Upvotes: 0

Views: 3461

Answers (1)

Harry Loat
Harry Loat

Reputation: 65

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

Upvotes: 0

Related Questions