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

Question

first, sorry because i know this problem has too many question, but i can't find a answer i need. i wanna create a sidebar like left sidebar of Facebook, when i scroll, sidebar will be stick when it shows up all of content. I know there is also an article about this (Sticky Sidebar Like Facebook how to add offset?) but it's not work. so i hope find the answer at here. (would be great if there was javascript, not jquery). thank's so much and have a nice day. Sicky sidebar

Answer 1

As @Vince mentioned, position: fixed is the way to go. However, you need to do a few calculations to know when to set the fixed position. You need:

• The top of the sidebar (in case you have a header or something)
• Height of the sidebar (to calculate where the bottom is)
• Height of the window
• Distance you've scrolled so far.

This all is very easy with jQuery and not much more difficult with plain JavaScript, just a bit more verbose. Check out this snippet:

 // 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

I misunderstood what you needed with my first answer. Here's a completely different answer that I think solves your problem better...

The gist of it is that you need to check the scroll position of the Window and change the position of the sidebar to fixed when it gets to the bottom.

This is very similar to @Xhynk's solution. The main difference is that I throttle the scroll events using a popular third-party library . This is a recommended practice, but may have minimal benefit here since there's not much going on during the scroll event anyway.

I also recalculate the sidebar height when the window is resized.

You can also find this in 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

With CSS: div.sidebar { position: fixed; } div.sidebar { position: fixed; }

It's very basic functionality. If you don't understand how to apply this, I suspect you're not quite ready. You should try an introductory HTML and CSS tutorial.