1

I am using Bootstrap v5 and would like to get a grid layout, where one column has position:fixed so that it scrolls with the very long column left to it.

The issue is the following:

Whenever the height of the first row gets too large such that the second row (with the position:fixed column) moves out of the viewport, then also the column ("Some sample content") disappears. For smaller heights, it works as expected.

The example code is:

<div class="container">
    <div class="row mt-5">
    <div class="col-md-8" style="min-height:200px; border: 1px solid red">
    </div>
    <div class="col-md-4">
        Box1
    </div>
    </div>    
    <div class="row mt-3">
    <div class="col-md-8" style="min-height:4000px; border: 1px solid red">
    </div>
    <div class="col-md-4">
    <div style="position:fixed">
    Some sample content
    </div>
    </div>
    </div>
            <div class="row">
    <div class="col-md-8" style="min-height:500px; border: 1px solid red">
    </div>
    <div class="col-md-4">
        Box End
    </div>
    </div>

You can find an example at: https://jsfiddle.net/4cma32k9/1/

Do you have any ideas to resolve it?

Best, Tom

tomseidel1
  • 85
  • 8

3 Answers3

2

Use sticky position:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="container">
  <div class="row mt-5">
    <div class="col-md-8" style="min-height:200px; border: 1px solid red">
    </div>
    <div class="col-md-4">
      Box1
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-8" style="min-height:4000px; border: 1px solid red">
    </div>
    <div class="col-md-4">
      <div class="sticky-top">
        Some sample content
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8" style="min-height:500px; border: 1px solid red">
    </div>
    <div class="col-md-4">
      Box End
    </div>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Cool, thank you! This seems to work! Can you explain why this works and the other approach doesn't? – tomseidel1 Jan 25 '21 at 11:11
  • @tomseidel1 position:fixed consider the screen to achieve its scroll behavior so it's difficult to get it working based on content. Position:sticky was introduced for such behavior. Some related question to understand sticky: https://stackoverflow.com/q/55965662/8620333 / https://stackoverflow.com/q/54609208/8620333 – Temani Afif Jan 25 '21 at 11:14
0

When I try to fix problem in JSFiddle i just add border and i see already your

Some sample Content

text is positioned by viewport whatever you do. In this point your result is what you want with large screen?

    <div class="col-md-4" style="border:1px solid green;" >
      <div style="position:fixed; border:1px solid gold;">
            Some sample content
       </div>
    </div>

position:fixed similarty position:absolute both abolute and fixed take the defined element out of the normal flow. Depends on the relatively positioned parent element.

Maybe some bootstrap problem occurs. Try to figure out without bootstrap codes. give Two or more divs and style it. Then try to shape it and reach what you want, if it is not working , I'll write and try it when I'm available.

Please make you sure, all option you try and give me feedback.

Ahmet Suhan Oka
  • 129
  • 4
  • Hi! Did you try it in the JSfiddle yourself? This does not yield the expected result, as this fixes the element to the top right corner of the middle row. However, I want the element to scroll along. – tomseidel1 Jan 24 '21 at 22:37
0
<div>
    <div style="position:fixed; z-index:9999;">
        do something ....
    </div>
</div>

So whatever content is in this div, its position is always in front of other content. If you want the content in this div to be behind the content of another div then you can use z-index:-9999