如何停止使用Facebook之類的javascript滾動側邊欄（粘性）

Question

首先，對不起，因為我知道這個問題有太多問題，但是我找不到我需要的答案。 我想創建一個側邊欄，如Facebook的左側側邊欄，當我滾動時，側邊欄在顯示所有內容時會被粘住。 我知道也有關於此的文章（像Facebook一樣的側邊欄如何添加偏移量？），但是它不起作用。 所以我希望在這里找到答案。 （如果有javascript而不是jquery會很棒）。 非常感謝，祝您有愉快的一天。 生病的側邊欄

Answer 1

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

• 側邊欄的頂部（如果您有標題或其他內容）
• 側邊欄的高度（計算底部的位置）
• 窗高
• 到目前為止，您滾動的距離。

這一切對於jQuery來說非常容易，而對於普通JavaScript來說就不那么困難了，只是有些冗長。 查看以下代碼段：

 // 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的解決方案非常相似。 主要區別在於，我使用流行的第三方庫來限制 scroll事件。 建議您這樣做，但由於滾動事件過程中執行的操作不多，因此此處的好處很小。

調整窗口大小時，我還會重新計算邊欄高度。

您也可以在這支筆中找到它。

 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; } div.sidebar { position: fixed; }

這是非常基本的功能。 如果您不知道如何應用它，我懷疑您還沒有准備好。 您應該嘗試HTML和CSS入門教程。