Question

我正在制作一个3栏的页面，左侧和左侧的侧边栏。对，中间部分。

当我向下滚动页面时，我不想修复两个侧边栏 - 只有主要应该移动。

以下是每个侧边栏的代码（它们是相同的） -

.sidebar {
width: 19%;
background-color: white;
order: 3;
padding-right: 34px;
}

这里是可滚动的中间区域 -

.site-main{
flex: 1;
order: 2;
background: #eee;
}

需要注意的是，页面包装器设置为 display:flex

position:fixed没有做到这一点。这是一个codepen

Answer 1

.sidebar-first {
  width: 20%;
  background: #ccc;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}
.sidebar-second { 
  width: 20%;
  background: #ddd;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}

＆＃13;

body {
  margin: 0;
}

.wrapper {
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}

.content {
  display: flex;
  flex: 1;
  background: #999;
  color: #000;
}

.columns {
  display: flex;
  flex: 1;
}

img {
    max-height: 100%;
    max-width: 100%;
}

.main {
  margin: 0 auto;
  background: #eee;
}

.sidebar-first{
  width: 20%;
  background: #ccc;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}
.sidebar-second{ 
  width: 20%;
  background: #ddd;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}

＆＃13;

<div class="wrapper">
  <section class="content">
    <div class="columns">
      <main class="main">
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
      </main>
      <aside class="sidebar-first">Sidebar first: Fixed width</aside>
      <aside class="sidebar-second">Sidebar second: Fixed width</aside>
    </div>
  </section>
</div>

＆＃13;

Answer 2

您需要将两个侧边栏设置为固定，使高度为100％。第二个侧边栏需要正确0，所以它位于右侧。需要z-index，因此它不会位于页脚顶部。主要需要左边距和边距右边，所以它不会被你的第一个和第二个边栏隐藏。

.sidebar-first {
    ...
    position:fixed;
    height: 100%;
    z-index: 1;
    ...
}

.sidebar-second {
    ...
    position:fixed;
    height: 100%;
    right: 0;
    z-index: 1;
    ...
}

.header, 
.footer {
    ...
    z-index: 2;
    ...
}

.main {
    ...
    margin-left: 20%;
    margin-right: 20%;
    ...
}

编辑：在margin-right: 20%;上加.main，因为您的第二个侧边栏会隐藏您的主要内容。

位置固定在flex侧边栏上

2 个答案: