如何制作像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

您可以在页面上存储一个特定的滚动位置值（像素数），您希望在该页面上从静态滚动条定位切换到将其固定到页面底部。我使用了侧边栏的开头 + 侧边栏的高度 - 窗口高度 + 我想要的侧边栏下方的填充。然后，您只需在文档滚动时检查窗口的滚动位置，如果它超过了您存储的值，则添加一个将其位置切换为固定的类。这个 sn-p 使用 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>