CSS固定位置在边栏上不起作用

Question

我正在使用切换按钮在固定的右侧栏上工作。切换按钮为Set<String>和position: fixed。因此，当用户向下滚动页面内容时，该按钮将固定在顶部。问题是当用户单击页面内容中间（或末尾）上的切换按钮时。侧栏内容仅显示背景而没有侧栏项目（用户需要滚动到顶部以查看侧栏项目）。每当用户单击切换按钮时，我都希望显示整个侧边栏项目

jsFiddle Link

侧边栏在内容顶部正常工作：

在页面内容中间不起作用：

Answer 1

当前布局的创建方式是，您可以设置固定的边栏内容的唯一方法是使用其他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>

Answer 2

对边栏使用以下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;}