javascript - 当页脚滚动到 View 中时如何向上推送固定侧边栏-请不要使用第 3 方库

Question

我看到了一个可能的解决方案 HERE ，但我希望我可以做到这一点，而无需将第三方插件添加到我不断增长的包含库列表中。

我有一个简单的 Bootstrap 4 布局，一个主要的 col-8 部分，一个第二个 col-4 侧边栏，以及一个页脚下方:

<div class="container-fluid">
<div class="row row-eq-height m-0 p-0 h-100">
     <div class="col-12 col-lg-7 col-xl-8 order-2 order-lg-1 py-3">MAIN CONTENT</div>
     <div class="col-12 col-lg-5 offset-lg-7 col-xl-4 offset-xl-8 order-1 order-lg-2 p-0 fixed-side">SIDEBAR</div>
</div>
</div>
<footer class="container-fluid container-footer pt-4 pb-1"></footer>

我想要做的是允许用户滚动 MAIN 列，而 FIXED-SIDE 侧边栏保持固定 (class fixed-side sets position:fixed, top: inherit, z-index: 0).当页脚出现时，我想将顶部值偏移看到页脚的像素数。

我在开发人员工具中测试过，这可能是操作 FIXED-SIDE 侧边栏顶部值的最简单方法。我只是不知道如何定位元素的“窗口内”高度。

我希望在 javascript 或 jQuery 中完成此操作，而不是导入新脚本并调用该脚本。

Answer 1

考虑使用 position: sticky; - 它可能有助于实现“固定位置”侧边栏，但仍允许在主 <div> 中滚动.

https://css-tricks.com/position-sticky-2/