Как css липкий левый бутстрап 4

Question

У меня есть приборная панель с боковым меню, которое я хочу зафиксировать слева.Я попытался сделать фиксированную позицию в css, но затем все div исказились и переместились с места.Затем я попытался использовать bootstrap sticky-left, и он просто не работал.Я хочу, чтобы левое меню оставалось фиксированным во время прокрутки графиков.

КОД:

<div class="row head">
      <div class="col-sm-2 sticky-left" id="side-bar">
          <div id="side-nav">
              <!--GREETING-->
          <div class="row greeting">
              <div class="col-sm-3" style="font-size: 2.6rem;">
                  <i class="far fa-user"></i>
              </div>

              <div class="col-sm-9">
                  <p>Hi Olivia!<br>School of UFeis</p>
              </div>
          </div>

          <!--LABEL-->
          <div class="row label">
              <div class="col-sm-12">
                  <p>Menu</p>
              </div>
          </div>
          <ul id="side-menu">

              <button>
                  <div class="row">
                      <div class="col-sm-1">
                          <i class="fas fa-desktop"></i>
                          </div>
                      <div class="col-sm-8">
                          Dashboard
                      </div>
                  </div>
              </button>
              <!---CHARTS BY YEAR--->
              <li class="parent">
                  <button>
                      <div class="row">
                          <div class="col-sm-1">
                              <i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
                          </div>
                          <div class="col-sm-8">
                              Year
                          </div>
                          <div class="col-sm-1">
                              <i class="fas fa-chevron-down"></i>
                          </div>
                      </div>
                  </button>
                  <ul class="sub-nav">
                      <li><button id=1>2019</button></li>
                      <li><button id=2>2018</button></li>
                      <li><button id=3>2017</button></li>
                  </ul>
              </li>



              <!-- CHARTS BY TEACHER -->
              <li class="parent">
                  <button>
                      <div class="row">
                          <div class="col-sm-1">
                              <i class="fas fa-chalkboard-teacher"></i>
                          </div>
                          <div class="col-sm-8">
                              Teacher
                          </div>
                          <div class="col-sm-1">
                              <i class="fas fa-chevron-down"></i>
                          </div>
                      </div>  
                  </button>
                  <ul class="sub-nav">
                      <li><button id=12>Ms. Lee</button></li>
                      <li><button id=13>Mr. Rogers</button></li>
                      <li><button id=6>Mr. Yang</button></li>
                      <li><button id=7>Ms. Mary</button></li>
                  </ul>
              </li>
          </ul>
      </div>
          </div>


      <!---CHARTS-->
      <div class="col-sm-10 chart_container">
          <div class="row rankings">
              <div class="col-sm-12">
                  <div class="row _chart">
                      <div id="lvl_chart">Please enter at least 3 markcards to see this chart.
              </div>
          </div>
              </div>
          </div>

          <!--RECALLED CHART-->
          <div class="row recalled">
              <div class="col-sm-11 container-fluid topChart">
                  <div class="row _chart" >
                      <div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
                  </div>
              </div>
          </div>

          <!--AGE CHART-->
          <div class="row">
              <div class="col-sm-11 bottomCharts">
                  <div class="row">
                       <div class="col-sm-6 age_chart">
                           <div class="row _chart">
                               <div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
                           </div>
                      </div>

          <!--GENDER CHART-->
              <div class="col-sm-6 gender_chart">
                  <div class="row _chart">
                      <div id="donut_chart" >
                      </div>
                  </div>
              </div>
                  </div>
              </div>


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

Answer 1

Надеюсь, вы ищете sticky-top боковую панель.

.chart_container {
  height: 500vh
}

ul {
  list-style: none;
  padding: 0
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row head">
    <div class="col-sm-3 " id="side-bar">
      <div id="side-nav" class="sticky-top text-center">
        <!--GREETING-->
        <div class="row greeting">
          <div class="col-sm-3" style="font-size: 2.6rem;">
            <i class="far fa-user"></i>
          </div>

          <div class="col-sm-9">
            <p>Hi Olivia!<br>School of UFeis</p>
          </div>
        </div>

        <!--LABEL-->
        <div class="row label">
          <div class="col-sm-12">
            <p>Menu</p>
          </div>
        </div>
        <ul id="side-menu">

          <button>
                  <div class="row">
                      <div class="col-sm-1">
                          <i class="fas fa-desktop"></i>
                          </div>
                      <div class="col-sm-8">
                          Dashboard
                      </div>
                  </div>
              </button>
          <!---CHARTS BY YEAR--->
          <li class="parent">
            <button>
                      <div class="row">
                          <div class="col-sm-1">
                              <i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
                          </div>
                          <div class="col-sm-8">
                              Year
                          </div>
                          <div class="col-sm-1">
                              <i class="fas fa-chevron-down"></i>
                          </div>
                      </div>
                  </button>
            <ul class="sub-nav">
              <li><button id=1>2019</button></li>
              <li><button id=2>2018</button></li>
              <li><button id=3>2017</button></li>
            </ul>
          </li>



          <!-- CHARTS BY TEACHER -->
          <li class="parent">
            <button>
                      <div class="row">
                          <div class="col-sm-1">
                              <i class="fas fa-chalkboard-teacher"></i>
                          </div>
                          <div class="col-sm-8">
                              Teacher
                          </div>
                          <div class="col-sm-1">
                              <i class="fas fa-chevron-down"></i>
                          </div>
                      </div>  
                  </button>
            <ul class="sub-nav">
              <li><button id=12>Ms. Lee</button></li>
              <li><button id=13>Mr. Rogers</button></li>
              <li><button id=6>Mr. Yang</button></li>
              <li><button id=7>Ms. Mary</button></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>


    <!---CHARTS-->
    <div class="col-sm-9 chart_container">
      <div class="row rankings">
        <div class="col-sm-12">
          <div class="row _chart">
            <div id="lvl_chart">Please enter at least 3 markcards to see this chart.
            </div>
          </div>
        </div>
      </div>

      <!--RECALLED CHART-->
      <div class="row recalled">
        <div class="col-sm-11 container-fluid topChart">
          <div class="row _chart">
            <div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
          </div>
        </div>
      </div>

      <!--AGE CHART-->
      <div class="row">
        <div class="col-sm-11 bottomCharts">
          <div class="row">
            <div class="col-sm-6 age_chart">
              <div class="row _chart">
                <div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
              </div>
            </div>

            <!--GENDER CHART-->
            <div class="col-sm-6 gender_chart">
              <div class="row _chart">
                <div id="donut_chart">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>