javascript - 如何制作像reddit网站一样的固定侧边栏？

Question

我已经尝试过固定位置和粘性位置。假设我们的网站有两栏，主栏和侧边栏。我们的侧栏的内容长于视口(viewport)的高度(如 reddit 网站中的那样它包含页脚和一些广告)。固定位置，侧栏不会在页面滚动时滚动。粘性位置，侧栏最初是粘性的，仅在主栏结束时滚动。在 reddit side bar 中，右侧边栏随着页面滚动而滚动。当侧边栏到达其内容的末尾时，它会粘在视口(viewport)上。我怎样才能做到这一点？

这是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

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