CSS 粘性侧边栏和固定 header

Question

我有一个带有粘性侧边栏并已修复的网站 header

开始滚动页面时出现问题，侧边栏被header

覆盖

下面是js fiddle

的粗略

有什么方法可以解决这个问题？

javascript 如果无法用 CSS

解决，解决方案还可以

我能想到的 javascript 的唯一解决方案是检查用户滚动了多远，然后将 padding top 添加到侧边栏，像这样

let distance =  document.querySelector('.sidebar').getBoundingClientRect().top;

    if (distance <= 0 && viewport_width >= 768) {

        $('.sidebar').css('paddingTop', '150px');

    } else {

        $('.sidebar').css('paddingTop', '0px');

    }

编辑：

我希望 header 的 z-index 和边栏相同
两个元素不应相互堆叠

Answer 1

阅读此 article 了解更多详情。

.sidebar {
  width: 25%;
  height: 25vh;
  min-height: 200px;
  overflow: auto;
  position: sticky;
  top: 5%;
}

.main {
  width: 60%;
  height: 200vh;
  min-height: 1000px;
  display: flex;
  flex-direction: column;
}

.main,
.sidebar {
  border: 5px solid #222;
  background-color: white;
  border-radius: 10px;
  color: #222;
  padding: 15px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

body {
  padding: 3%;
  background-color: #ccc;
  font-size: 20px;
  box-sizing: border-box;
  font-family: Lato, sans-serif;
}

code,
pre {
  background-color: #ccc;
  padding: 0 3px;
  border-radius: 5px;
}

.bottom {
  justify-self: bottom;
}

<div id="header">
  <h2>Header</h2>
  <p>This is the header blab al alb albalblablabla lb lab labl abl labl ablalbalbla blaba lb lablablablablalba balb lab alb alb la</p>
</div>
<div class="wrapper">
  <div class="main">
    <h2>Main content</h2>
    <p>Scroll down the page!</p>
    <h3>How to recreate this</h3>
    <p>
      Position the columns with flex. Then apply two lines of CSS to the sidebar to make it sticky:
      <pre>
.sidebar {
  position: sticky;
  top: 0;
}
    </pre> Include <code>position: -webkit-sticky;</code> for Safari.
    </p>
  </div>

  <div class="sidebar">
    <h3>Sticky sidebar</h3>
    <p>I will follow you!</p>
    <p><a href="https://caniuse.com/#search=sticky">caniuse stats</a>
  </div>
</div>
<div id="footer">
  <h2>Footer</h2>
  <p>This is the footer</p>
</div>

Answer 2

您需要在 #header{z-index: 10;} 上定义 z-index 而不需要使用 float 因此您可以使用 display: flex & order:1 属性实现并使用 position: sticky; top:110px在 #sidebar 上没有 JavaScript。
检查我下面的代码片段

*{box-sizing: border-box;}
body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
h2,p{margin: 0;}
#header {
    position: fixed;
    width: 100%;
    max-width: 800px;
    height: 80px;
    top: 10px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: black;
    color:red;
    z-index: 10;
}
#body{
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid #ccc;
    padding: 5px;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    margin: 110px auto 20px auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#sidebarWrap {
    position: sticky;
    top: 110px;
    height: auto;
    min-width: 210px;
    max-width: 210px;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    background-color: #72f8cb;
    order: 1;
}
#content {
    width: 100%;
    height: 800px;
    background-color: #f8d3a2;
}
#footer {
    height: 800px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 5px;
    background-color: #ccc;
}

<div id="header">
    <h2>Header</h2>
    <p>This is the header blab al alb albalblablabla lb lab labl abl labl ablalbalbla</p>
</div>

<div id="body">
    <div id="sidebarWrap">
        <div id="sidebar">
            <h2>Sidebar</h2>
            <p>Sidebar has content in it and will be sticky until it's bottom container reaches the footer container.
                Then it will scroll up as expected. But will be blocked by fixed header</p>
        </div>
    </div>
    <div id="content">
        <h2>Content</h2>
        <p>This is the main content section.</p>
    </div>
</div>

<div id="footer">
    <h2>Footer</h2>
    <p>This is the footer</p>
</div>

CSS 粘性侧边栏和固定 header

CSS Sticky sidebar and fixed header

css

css-position