如何使用 Facebook 等 javascript 停止滚动侧边栏（粘性）

Question

首先，对不起，因为我知道这个问题有太多问题，但我找不到我需要的答案。 我想创建一个类似 Facebook 左侧边栏的侧边栏，当我滚动时，侧边栏会在显示所有内容时保持不变。 我知道还有一篇关于此的文章（Sticky Sidebar Like Facebook 如何添加偏移量？）但它不起作用。 所以我希望在这里找到答案。 （如果有 javascript，而不是 jquery，那就太好了）。 非常感谢，祝您有愉快的一天。 Sicky sidebar

Answer 1

正如@Vince 所提到的，position: fixed 是要走的路。但是，您需要进行一些计算才能知道何时设置固定位置。你需要：

• 侧边栏的顶部（如果您有标题或其他内容）
• 侧边栏的高度（用于计算底部的位置）
• 窗口高度
• 到目前为止您已滚动的距离。

这一切使用 jQuery 都非常简单，而使用纯 JavaScript 并不难，只是有点冗长。看看这个 sn-p：

// Define Our Sidebar
const sidebar = document.getElementById("sidebar");

// Get Sidebar Parameters
let sidebarTop      = sidebar.offsetTop,
    sidebarHeight   = sidebar.clientHeight,
    sidebarBottom   = sidebarHeight - sidebarTop;

// Determine Current Scroll Position
window.onscroll = function(){
  let distanceScrolled = document.documentElement.scrollTop,
      windowHeight     = window.innerHeight,
      calculation      = distanceScrolled + windowHeight;
  
  if( calculation >= sidebarBottom ){
    sidebar.classList.add('sticky');
  } else {
    sidebar.classList.remove('sticky');
  }
}

#sidebar.sticky {
  position: fixed;
  bottom: 0;
  right: 0;
}

* { margin: 0; box-sizing: border-box; }
#content { line-height: 40px; background: linear-gradient(to bottom, #eee, #888); width: 66.66%; }
#sidebar { background: linear-gradient(to bottom, #2bf, #06c); color: #fff; width:33.33%; float: right; height: 175vh; position: relative; min-height: 450px; }
.last-item { position: absolute; bottom: 0; }
.second-item { position: absolute; top: 50%; transform: translateY(-50%); }

<aside id="sidebar">
  First Item<br />
  <span class="second-item">Sidebar</span><br />
  <span class="last-item">Last Item</span><br />
</aside>
<main id="content">
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
  Content<br><br><br><br><br><br><br>
</main>

Answer 2

我误解了您的第一个答案需要什么。这是一个完全不同的答案，我认为它可以更好地解决您的问题...

它的要点是你需要检查窗口的滚动位置，并在它到达底部时将侧边栏的position更改为固定。

这与@Xhynk 的解决方案非常相似。主要区别在于我在throttle 和scroll 事件中使用了popular third-party library。这是推荐的做法，但在这里可能没有什么好处，因为在滚动事件期间无论如何都不会发生太多事情。

我还会在调整窗口大小时重新计算侧边栏高度。

您也可以在this pen 中找到它。

window.addEventListener('load', () => {
  let sidebar = document.getElementById('sidebar')
  let sidebarHeight = sidebar.offsetHeight
  
  window.addEventListener('scroll', _.throttle(positionSidebar, 50))
  window.addEventListener('resize', _.throttle(resizeCalc, 50))

  function positionSidebar () {
    let windowBottom = window.scrollY + window.innerHeight
    if (windowBottom >= sidebarHeight) {
      sidebar.classList.add('fixed')
    } else {
      sidebar.classList.remove('fixed')
    }
  }
  
  function resizeCalc () {
    sidebarHeight = sidebar.offsetHeight
  }
})

html,
body {
  margin: 0;
  height: 100%;
}

h2 { margin: 0; }
h2+p { margin-top: 0; }

#sidebar,
#main {
  box-sizing: border-box;
  padding: 1rem;
}

#sidebar {
  color: white;
  background: #111;
  width: 40vw;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
}

#sidebar.fixed {
  position: fixed;
  top: auto;
  bottom: 0;
}

#main {
  margin-left: 40vw;
}

<div id="sidebar">
  <div>
    <h2>Sb Heading 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, ex odit minus eum nam debitis iste doloremque ut facilis excepturi quibusdam suscipit aspernatur necessitatibus rerum aliquam nobis ipsa. Nemo, alias.</p>
  </div>
  <div>
    <h2>Sb Heading 2</h2>
    <p>Saepe laborum delectus accusantium itaque ipsa cum eaque eligendi quaerat mollitia? Magnam odit modi dolor maxime nobis, perferendis, iusto quo iure incidunt dolorum, a itaque aut quod quibusdam sit neque.</p>
  </div>
  <div>
    <h2>Sb Heading 3</h2>
    <p>Perferendis accusamus cumque laudantium error architecto ratione sed optio aliquid, pariatur quod similique, explicabo, nulla atque. Error dolorem, dicta, unde perspiciatis quo deleniti adipisci sint enim quas maxime voluptas quasi.</p>
  </div>
  <div>
    <h2>Sb Heading 4</h2>
    <p>Sed magni labore temporibus in debitis numquam, rem quam quaerat dolorum beatae consectetur officia nulla culpa recusandae optio cum officiis et perferendis quis deserunt ab earum. Autem voluptatibus delectus ratione.</p>
  </div>
  <div>
    <h2>Sb Heading 5</h2>
    <p>Odit neque ad mollitia quasi repudiandae non necessitatibus molestiae atque doloremque soluta harum quisquam dicta perspiciatis eum, eveniet nesciunt eligendi adipisci unde delectus reiciendis! Praesentium, et. Ratione, neque. Error, tempora.</p>
  </div>
  <div>
    <h2>Sb Heading 6</h2>
    <p>Doloribus nobis mollitia consectetur reiciendis hic atque quibusdam quas corrupti. Delectus tempora quam sit officiis pariatur incidunt est expedita ab adipisci, eius cumque temporibus laborum aliquid iste obcaecati deleniti voluptas.</p>
  </div>
  <div>
    <h2>Sb Heading 7</h2>
    <p>Eius ullam rem ea, nulla reprehenderit dignissimos, perspiciatis tempora distinctio repellendus enim vel earum quisquam modi cupiditate mollitia esse fuga et sapiente ducimus id non dolor veniam quis? Tempora, exercitationem?</p>
  </div>
  <div>
    <h2>Sb Heading 8</h2>
    <p>Exercitationem nesciunt est libero numquam dolores, repellendus facere laudantium consequuntur quia sed necessitatibus neque voluptatem aut illum quae eos minima! Sequi repellat odit eius officia, amet veniam a fuga ut!</p>
  </div>
  <div>
    <h2>Sb Heading 9</h2>
    <p>Ducimus, eius. Quo itaque praesentium harum, exercitationem dicta quibusdam incidunt labore voluptatum nisi officiis qui debitis repellat officia illum atque porro doloremque laboriosam magni optio provident sint, ducimus in sit.</p>
  </div>
  <div>
    <h2>Sb Heading 10</h2>
    <p>Aspernatur vitae porro et quia aliquid quidem, laudantium nulla? Non ad a reprehenderit blanditiis nemo officia minima iste architecto sequi culpa placeat voluptatum, enim dolore delectus, eveniet omnis ipsa illo.</p>
  </div>
</div>

<div id="main">
  <div>
    <h2>Heading 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur nulla iusto, architecto iste, voluptate pariatur nemo doloremque laudantium explicabo quos corrupti natus, itaque in. Voluptas tempora esse consequatur enim dignissimos!</p>
  </div>
  <div>
    <h2>Heading 2</h2>
    <p>Voluptatibus mollitia, harum reprehenderit, id laboriosam laborum totam eligendi ab tenetur, vel saepe at aliquam aut minima. Ea adipisci laudantium, eius, dolores veritatis velit hic corporis amet veniam iure dolorum.</p>
  </div>
  <div>
    <h2>Heading 3</h2>
    <p>Ex vero eius atque porro explicabo magni. Omnis, voluptas unde praesentium sed facere ad iure quod facilis dolore esse labore voluptatem deserunt exercitationem a repellendus accusamus itaque aliquid saepe repudiandae?</p>
  </div>
  <div>
    <h2>Heading 4</h2>
    <p>Laboriosam ad in consectetur magnam fugiat, assumenda, distinctio provident aperiam necessitatibus quam dignissimos illo quibusdam minima. Ducimus, molestias quisquam, accusantium provident iste tempora hic quibusdam facere odio inventore, dolor quas.</p>
  </div>
  <div>
    <h2>Heading 5</h2>
    <p>Non dignissimos atque ut inventore quibusdam exercitationem cum aliquam, voluptates harum, tempora ea! Nihil vitae qui optio voluptas assumenda eius doloribus eaque accusantium culpa. Sed vitae blanditiis consequatur dolorem deserunt.</p>
  </div>
  <div>
    <h2>Heading 6</h2>
    <p>A minima culpa commodi sapiente recusandae, voluptatibus modi, eos porro necessitatibus deserunt consectetur qui dolores aut optio harum rem vel, doloribus repellat nulla fuga? Molestias ipsam est aliquid aspernatur sint.</p>
  </div>
  <div>
    <h2>Heading 7</h2>
    <p>Neque dolor distinctio officia temporibus error ipsum tempore dignissimos maiores sequi. Illum est ad nostrum rem distinctio nisi, quisquam tempore cupiditate nulla cum maxime modi obcaecati cumque reiciendis doloribus laborum.</p>
  </div>
  <div>
    <h2>Heading 8</h2>
    <p>Veniam nam, quidem a in accusantium iste amet. Magni ea placeat, ipsam laborum totam ex maiores rerum doloremque eius illum incidunt dolorem! Ipsa tempore consequatur, dolorum cum fugiat voluptatum nulla.</p>
  </div>
  <div>
    <h2>Heading 9</h2>
    <p>Laborum modi sint quis ipsum numquam quia incidunt dignissimos iste eligendi molestiae natus accusamus, explicabo est enim esse earum quae provident assumenda. Delectus architecto ullam voluptatem voluptatibus omnis, quia optio.</p>
  </div>
  <div>
    <h2>Heading 10</h2>
    <p>Tempora, laudantium repudiandae sit explicabo adipisci sapiente ipsa aspernatur aperiam deserunt non quibusdam recusandae, quaerat, esse architecto nisi tenetur enim? Maiores quis totam reprehenderit exercitationem deleniti minima. Earum, laudantium iste.</p>
  </div>
  <div>
    <h2>Heading 11</h2>
    <p>Quae rerum similique praesentium! Asperiores aliquid nam, repellendus, deleniti praesentium dicta aspernatur quas dolorum cupiditate quia inventore nemo? Reprehenderit esse, veniam animi et temporibus quis molestiae omnis soluta commodi maiores!</p>
  </div>
  <div>
    <h2>Heading 12</h2>
    <p>Culpa iste iusto error impedit. Praesentium adipisci necessitatibus dolores dignissimos rem in voluptatem consequuntur, vitae quisquam deleniti earum, culpa, odio reiciendis dolore saepe laudantium atque maxime modi nostrum itaque harum?</p>
  </div>
  <div>
    <h2>Heading 13</h2>
    <p>Repellat distinctio quaerat corporis doloribus consequuntur! Eos reiciendis quasi eius excepturi maxime asperiores doloribus deleniti dolorem iusto dolore praesentium, officia quam dicta ea modi quae minima, rerum libero obcaecati architecto?</p>
  </div>
  <div>
    <h2>Heading 14</h2>
    <p>Corporis voluptas vel fuga assumenda alias. Voluptatum error est, temporibus ex laborum debitis quis aspernatur ratione delectus quasi, perferendis dicta labore, laudantium eaque. Accusamus adipisci atque quis architecto. Mollitia, possimus.</p>
  </div>
  <div>
    <h2>Heading 15</h2>
    <p>Quos, molestiae quisquam? Fugit porro sequi, libero omnis eveniet sed provident unde nam similique reprehenderit culpa ab? Accusantium quo illo facilis dolore, cum praesentium tenetur minima temporibus mollitia? Quibusdam, debitis!</p>
  </div>
  <div>
    <h2>Heading 16</h2>
    <p>Nemo quas, temporibus earum autem voluptatum incidunt nesciunt, expedita iste perspiciatis maxime est labore. Quo harum dolorum amet, dolores, voluptatem placeat quae consequuntur vitae impedit excepturi iusto reiciendis debitis minima.</p>
  </div>
  <div>
    <h2>Heading 17</h2>
    <p>Soluta blanditiis labore minus autem ducimus repellendus eaque aliquam saepe culpa officiis. Magni eligendi, consequatur illo vero alias, repudiandae totam animi doloremque, sequi voluptate quas recusandae. Dolorem iure eum incidunt.</p>
  </div>
  <div>
    <h2>Heading 18</h2>
    <p>Corrupti nemo cum quasi obcaecati libero modi ad. Ex consectetur sint tempore vitae explicabo iure fuga rerum quia corrupti blanditiis libero repudiandae, quidem id facilis aperiam, tenetur quasi hic deleniti?</p>
  </div>
  <div>
    <h2>Heading 19</h2>
    <p>Qui dolores, maiores reprehenderit cupiditate vitae provident ratione perferendis placeat doloremque quis odio rerum dignissimos architecto! Rem asperiores dignissimos sed impedit qui iusto provident tempora expedita, voluptates corrupti, optio explicabo?</p>
  </div>
  <div>
    <h2>Heading 20</h2>
    <p>Magnam cumque ut nulla quas perferendis repellendus, error dolore recusandae reiciendis. Sequi velit consequatur rerum fuga, obcaecati beatae ab hic modi expedita voluptas nesciunt culpa voluptatem debitis natus provident unde.</p>
  </div>
  <div>
    <h2>Heading 21</h2>
    <p>Sapiente quibusdam iste suscipit laborum perspiciatis ex, accusantium repellat ad eligendi quos laboriosam ducimus. Deserunt modi in maxime laboriosam minima velit, eum libero odio nam quis ipsa corrupti, earum et!</p>
  </div>
  <div>
    <h2>Heading 22</h2>
    <p>Vitae, quis similique, commodi culpa minus laborum molestiae corrupti nihil temporibus non aspernatur. Iusto, at a deserunt in blanditiis expedita dignissimos. Fugit consequuntur unde itaque quasi quam harum, consectetur eum?</p>
  </div>
  <div>
    <h2>Heading 23</h2>
    <p>Recusandae harum eum commodi reprehenderit eligendi sed possimus quia explicabo ipsam consectetur facilis odio fugiat itaque, eaque nemo quis necessitatibus. Cum aspernatur qui sint architecto maxime molestias odio iusto corporis!</p>
  </div>
  <div>
    <h2>Heading 24</h2>
    <p>Accusantium quisquam voluptatum neque, nisi distinctio quas est et sint perspiciatis accusamus architecto dolorem blanditiis magnam quasi molestias explicabo alias qui ad minus at, provident sit iste. Eos, eum blanditiis!</p>
  </div>
  <div>
    <h2>Heading 25</h2>
    <p>Iusto, ut facere. Numquam, unde nam quod quidem quae rerum. Corporis adipisci magnam veritatis illo. Veritatis necessitatibus quidem totam id, sunt nemo aliquam tempora dolor quia corrupti dolorum! Error, maxime.</p>
  </div>
  <div>
    <h2>Heading 26</h2>
    <p>Assumenda sunt id culpa ut itaque officiis, facere aut autem. Aperiam eius ipsa vitae ab commodi voluptatem provident magni aut eligendi non itaque voluptas, quidem nulla esse similique totam possimus.</p>
  </div>
  <div>
    <h2>Heading 27</h2>
    <p>Nesciunt, ut cumque possimus minima doloremque perspiciatis consequatur totam sed expedita doloribus, quia reiciendis mollitia ipsa distinctio praesentium perferendis repellat amet autem tenetur tempore voluptate dolorum. At quis temporibus voluptates!</p>
  </div>
  <div>
    <h2>Heading 28</h2>
    <p>Dolore unde placeat veritatis aperiam molestias quae ipsam asperiores debitis itaque, cum autem officia harum corporis voluptatum modi laudantium perspiciatis earum? Laborum at animi commodi? Dolorem hic atque error deserunt.</p>
  </div>
  <div>
    <h2>Heading 29</h2>
    <p>In pariatur quibusdam est error. Deserunt saepe minus accusantium fugiat, obcaecati in voluptatibus corporis provident quibusdam nulla quisquam ullam aliquid hic, fugit tempore exercitationem eligendi laudantium culpa labore, beatae illo?</p>
  </div>
  <div>
    <h2>Heading 30</h2>
    <p>Aliquam consequatur amet doloribus corrupti rem, saepe optio cumque quam tempore excepturi error, numquam non natus perspiciatis, nostrum cum dolor porro! Fugiat cumque saepe mollitia ipsa quod velit ea iste!</p>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 3

使用 CSS：div.sidebar { position: fixed; }

这是非常基本的功能。如果你不明白如何应用它，我怀疑你还没有准备好。您应该尝试介绍 HTML 和 CSS 教程。