Question

正如您在 this codepen中看到的那样，页脚被粘边栏覆盖。如果我只是更改z-index，则侧边栏会被页脚覆盖。这两种方式都不好。

这有一个优雅的解决方案吗？当页脚进入视图时，可能会向侧边栏滚动一下？1

    <div>
<div class="sidebar">
  <h3>Sidebar</h3>

</div>
<div class="article">
</div>
</div>
<footer class="page-footer">
   <div class="content">
       ....
   </div>
</footer>

<style>
 body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
.sidebar {
  text-align: center;
  background-color: #E7EAEC;
  width: 20rem;
  position: fixed;
  height: 100%;
  height: 100vh;
  top:0;
  left: 0;
  padding: 5em 1em;
}
.article {
  margin-left:20rem;
}
</style>

Answer 1

我在调整大小窗口上使用滚动侧边栏制作了一个解决方案。我们正在听取两个事件：load和resize。在那些事件中，我们需要使文章的高度与侧边栏的高度相等。

$(window).load(function() {
    var article =  $(".article").height();
    $(".sidebar").height(article);
});

$(window).resize(function() {
    var article =  $(".article").height();
    $(".sidebar").height(article);
});

如果您希望此解决方案有效，请将fixed的位置从absolute更改为.sidebar元素。

以下是示例：CodePen

检查代码，如果你想通过其他方式告诉我。

如何制作一个粘性边栏＆＃39;汇总＆＃39;或滚动到页脚时移动，所以它不会被它覆盖？

1 个答案: