首先，抱歉，因为我知道这个问题有太多问题，但我无法找到我需要的答案。 我想创建一个像Facebook的左侧边栏一样的侧边栏，当我滚动时，侧边栏会在显示所有内容时粘贴。 我知道还有一篇关于此的文章（Sticky Sidebar Like Facebook如何添加偏移？）但它不起作用。 所以我希望在这里找到答案。 （如果有javascript而不是jquery会很棒）。 非常感谢，祝你有个美好的一天。 Sicky sidebar
答案 0 :(得分：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>
答案 1 :(得分：0)
我的第一个答案误解了你需要的东西。这是一个完全不同的答案，我认为更好地解决了你的问题...
它的要点是你需要检查窗口的滚动位置，并在侧边栏的position到达底部时将其更改为固定。
这与@ Xhynk的解决方案非常相似。主要区别在于我使用don't share the exact same implementation throttle scroll个事件。这是一种推荐的做法，但这里的好处可能很小，因为无论如何在滚动事件期间没有太多的进展。
我还会在调整窗口大小时重新计算侧边栏的高度。
您也可以在popular third-party library。
中找到
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>
答案 2 :(得分：-1)
使用CSS：div.sidebar { position: fixed; }
这是非常基本的功能。如果你不明白如何应用这个，我怀疑你还没准备好。您应该尝试介绍HTML和CSS教程。