Как исправить некоторые элементы HTML на веб-странице, в то же время заставляя другие прокручиваться

Question

Обычно на странице есть панель навигации, за которой следует строка, содержащая два столбца. В левом столбце отображается информация о профиле пользователей (профиль, короткая биография и т. Д.), А в правом столбце - некоторая другая информация.

Когда я пытаюсь прокрутить страницу, создается впечатление, что загрузочная карта под панелью навигации прокручивает панель навигации.

Мне бы хотелось, чтобы навигационная панель и левый столбец оставались фиксированными при прокрутке страницы, но правый столбец можно было прокручивать.

Вот HTML-страница ..

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

Вот CSS для страницы ..

#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;
}

Так как этого добиться?

Answer 1

Сделайте левый col-2 position:fixed, используя Bootstrap's position-fixed, а затем используйте offset-2 на col-10, чтобы держать его справа ...

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

Демо: https://www.codeply.com/go/5yFRtzwJvZ

Похожие вопросы:

Как создать фиксированный макет боковой панели с помощью Bootstrap 4?
Фиксированный и прокручиваемый столбец в flexbox Bootstrap 4

Answer 2

Вы можете использовать html-объект в правом столбце div:

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

класс «right-column» только для того, чтобы убедиться, что он заполняет все доступное пространство:

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

Таким образом вы гарантируете, что можете прокрутить правый столбец, пока другой контент исправлен. Правый столбец адаптирует его высоту к высоте строки, поэтому, если вы хотите изменить высоту, просто измените высоту строки (которая сейчас определяется левым столбцом)