How to fix some html elements on webpage whilst making others scrollable

Question

Basically the page has a navbar followed by a row containing two columns. In the left hand side column users profile information (profile pic, short bio, etc) is displayed and in the right hand side column some other information is displayed.

When I try to scroll the page it looks like the bootstrap card below navbar is scrolling over the navbar.

I would like the navbar and the left hand side column to remain fixed when page scrolls but the right hand side column can be scrolled.

Here is the html page..

<nav class="navbar navbar-expand-lg navbar-light bg-cream-shade" id='bootstrap-override-navbar'>
  Some nav setup
</nav>
<!--here starts the problem-->
<div class="card bg-cream">
  <div class="row">
    <div class="col-2">
      <div class="card" id='bootstrap-override-card'>
        <div>
          <img src=".." alt="Generic placeholder image"/>
        </div>
        <div class="media">
          <div class="media-body">
            <h5>Chanakya Sunkarapally</h5>
          </div>
        </div>
        <p class="card-text"><small>Some quick info about me. </small></p>
        <div class="list-group list-group-flush">
          <!--list of stuff-->
        </div>
        <div class="card-body">
          Some info
        </div>
      </div>
    </div>
    <div class="col-10 bg-white">
      <!--Some Content-->
    </div>
  </div>
</div>

Here is the css for the page..

#bootstrap-override-card {
background: linear-gradient(to bottom, #ffffe1, #fffff4);
border: none;
/* position: sticky;*/
padding: unset;
top: auto;
position: sticky;
}
.bg-cream{
background:  #fffff4;
}
.bg-cream-shade {
background: linear-gradient(to right, #ffffe1, #fffff4);
}
#bootstrap-override-navbar {
position: sticky;
top: 0;
}

So how to achieve this?

Hi If I'm reading your stuff correctly you need to use z-index — 13garth, Sep 03 '18 at 09:46
z-index: -1; It basically says what div or item should be ontop or under neath — 13garth, Sep 03 '18 at 09:48
https://codepen.io/Garth13/pen/NLjxEm Use this as a reference — 13garth, Sep 03 '18 at 10:32

score 0 · Answer 1 · answered Sep 03 '18 at 10:09

You can use an html object in your right column div:

<div class="col-10 bg-white">
    <object class="right-column" type="text/html" data="your_file_path.html" ></object>
</div>

"right-column" class just to make sure that it fills all the available space:

.right-column {
    width: 100%;
    height: 100%;
}

This way you ensure that you can scroll the right column while the other content is fixed. The right column will adapt his height to the row height, so if you want to change the height just change the height of the row (which right now is determined by the left column)

score 0 · Answer 2 · answered Sep 03 '18 at 11:25

Make the left col-2 position:fixed using Bootstrap's position-fixed, and then use offset-2 on the col-10 to keep it on the right...

<nav class="navbar navbar-expand-lg navbar-light bg-cream-shade" id="bootstrap-override-navbar">
    Some nav setup
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-2 position-fixed">
            <div class="card" id="bootstrap-override-card">
                ...
            </div>
        </div>
        <div class="col-10 bg-white offset-2">
            <!--Some Content-->

        </div>
    </div>
</div>

Demo: https://www.codeply.com/go/5yFRtzwJvZ

How to fix some html elements on webpage whilst making others scrollable

2 Answers2