如何使固定边栏像reddit网站一样？

Question

我已经尝试过使用固定位置和粘性位置。假设我们的网站中有两列，分别是主列和侧边栏。并且侧边栏的内容长于视口的高度（例如reddit网站，其中包含页脚和一些广告）。固定位置时，侧栏不会在页面滚动上滚动。固定位置时，侧栏最初是粘性的，仅在主列结束时才滚动。在reddit侧栏中，右侧栏与页面滚动一起滚动。当侧边栏到达其内容的末尾时，它会粘在视口上。我该如何实现？

这是CSS的代码

.sidenav {   position: sticky;   top: 20px;    right: 0;   left: 0;   float: left;   padding:10px;   z-index:999998; }

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block; }

.main {
    margin-left: 140px; 
    font-size: 28px; 
    padding: 0px 10px; }

HTML代码

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
    <a href="#about">About</a>
</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
    <p>
</div> 

Answer 1

编辑：

HTML：

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <div class="sticky-tag">
  <a href="#sticky">sticky</a>
  <a href="#sticky">sticky</a>
  </div>
</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
    <p>
</div> 

CSS：

.sidenav {
  margin-top: 20px;
  float: left;
  padding: 10px;
  z-index: 999998;
  width: 12%;
  height: 100vh; 
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block; 
}

.sidenav .sticky-tag {
  position: sticky;
  top: 20px;
}

.main {
  width: 88%;
  margin-left: 12%;
  font-size: 28px; 
  padding: 0px 15px; 
}

Answer 2

您可以在页面上存储特定的滚动位置值（像素数），从静态滚动条的位置切换到将其固定到页面的底部。我使用了侧边栏的开始+侧边栏的高度-窗口高度+我想要在侧边栏下方的填充。然后，您只需在滚动文档时检查窗口的滚动位置，如果它超出了存储的值，您将添加一个将其位置切换为固定的类。该代码段使用jQuery仅需几行即可完成该行为。

const sidebar = $('.sidebar');
const fixedScrollPosition = sidebar.offset().top + sidebar.outerHeight() - $(window).innerHeight() + 10;

$(document).on('scroll', function() {
  sidebar.toggleClass('fixed', $(window).scrollTop() > fixedScrollPosition);
});

body {
  font-size: 0;
  padding: 0;
}

p {
  height: 200px;
  background: red;
}

p:last-child {
  margin: 0;
}

.page-content {
  width: calc( 100% - 160px);
  margin-right: 10px;
  font-size: initial;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
}

.sidebar {
  width: 150px;
  font-size: initial;
  box-sizing: border-box;
  vertical-align: top;
  display: inline-block;
}

.sidebar.fixed {
  position: fixed;
  bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>
<div class="sidebar">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>