CSS фиксированная позиция не работает на боковой панели

Question

Я работаю на фиксированной правой боковой панели с кнопкой переключения.Кнопка переключения - position: fixed и top: 10px.Таким образом, кнопка будет зафиксирована сверху, когда пользователь прокручивает содержимое страницы вниз.Проблема заключается в том, что пользователь нажимает кнопку переключения в середине (или конце) содержимого страницы.Содержимое боковой панели показывает только фон без элементов боковой панели (пользователю необходимо прокрутить вверх, чтобы просмотреть элемент боковой панели).Я хочу отображать элементы всей боковой панели всякий раз, когда пользователь нажимает кнопку переключения

jsFiddle Link

Боковая панель работает правильно в верхней части содержимого:

Не работает в середине содержимого страницы:

Answer 1

используйте следующую CSS для вашей боковой панели.Вам нужно будет зафиксировать положение .side-bar, а также удалить свойство transform, поскольку оно влияет на свойство position: fixed.

.side-nav{ 
 height: 100%;
 width: $side-nav-width;
 position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #253781;
//transform: translateX(-$side-nav-width); 
overflow-x: hidden;
padding-top: 20px;}

Answer 2

Ваш текущий макет создан таким образом, что единственный способ установить фиксированный контент на боковой панели - это использовать дополнительные библиотеки JS.

Я предлагаю отредактировать и воссоздать его, используя этот пример: https://www.cssscript.com/sliding-push-navigation-menu-pure-css/

Вот живая демонстрация:

/* -- Slideout Sidebar -- */

.slideout-sidebar {
  position: fixed;
  top: 0;
  left: -190px;
  z-index: 0;
  width: 150px;
  height: 100%;
  padding: 20px;
  background-color: #212121;
  transition: all 300ms ease-in-out;
}


/* -- Slideout Sidebar -- */

.slideout-sidebar {
  position: fixed;
  top: 0;
  left: -190px;
  z-index: 0;
  width: 150px;
  height: 100%;
  padding: 20px;
  background-color: #212121;
  transition: all 300ms ease-in-out;
}

.slideout-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slideout-sidebar ul li {
  cursor: pointer;
  padding: 18px 0;
  border-bottom: 1px solid rgba(244, 244, 244, 0.4);
  color: rgba(244, 244, 244, 0.7);
}

.slideout-sidebar ul li:last-child {
  border-bottom: 0;
}

.slideout-sidebar ul li:hover {
  color: rgba(244, 244, 244, 1);
}

#menu-toggle {
  display: none;
}

.menu-icon {
  position: absolute;
  top: 18px;
  left: 30px;
  font-size: 24px;
  z-index: 1;
  transition: all 300ms ease-in-out;
}


/*-- The Magic --*/

#menu-toggle:checked~.slideout-sidebar {
  left: 0px;
}

#menu-toggle:checked+.menu-icon {
  left: 210px;
}

#menu-toggle:checked~.content-container {
  padding-left: 190px;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />




<input id="menu-toggle" type="checkbox">

<label for="menu-toggle" class="menu-icon">
  <i class="fa fa-bars"></i>
</label>

<div class="content-container">
  <div class="site-title">
    <h1>Push Navigation</h1>
  </div>

  <div class="content">
    <img src="https://placeimg.com/720/250/people" alt="" class="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget nulla mollis, efficitur urna nec, viverra dolor. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci
      luctus et ultrices posuere cubilia Curae; Praesent efficitur finibus eros sit amet sagittis. Ut sollicitudin sodales neque et volutpat. Curabitur dictum ante vel fermentum volutpat. Curabitur ac neque et erat viverra egestas.</p>
  </div>
</div>

<div class="slideout-sidebar">
  <ul>
    <li><i class="fa fa-home"></i> Home</li>
    <li><i class="fa fa-user"></i> About Us</li>
    <li><i class="fa fa-book"></i> Blog</li>
    <li><i class="fa fa-envelope"></i> Contact</li>
  </ul>
</div>