javascript - 如何使 Bootstrap 4 列跟随页面滚动？

Question

我有一行有两列 - 一列在左边(有一个 jar )，另一列在右边(有按钮)。

https://codepen.io/OakTreePedro/full/NEEVxr

当屏幕很大时，我将它们并排放置，要查看所有右侧列的内容，我必须向下滚动。当我这样做时，我希望左栏中的内容跟随该滚动条，而目前并没有发生这种情况。

基本上，当尝试从右栏底部选择过滤器时，我希望左栏上的 jar 伴随向下滚动。

我已经尝试了很多事情:

• 我尝试使用媒体查询 - 如果屏幕的 min-width 是 992px，我会应用 position: fixed 或 position: sticky 到左栏；

• 我已经尝试在 window.resize() 上使用 JavaScript，如果 innerWidth 是 >= 992，我会将 position: fixed 或 position: sticky 应用于左列的 style，或 classList.add(position-fixed)/classList.add(position-sticky)/classList.add(sticky-top);

• 我目前正尝试将 stickyfill 与上述解决方案结合使用以实现我的目标，但无济于事。

这是我的代码:

https://codepen.io/OakTreePedro/pen/WLyBqp

HTML:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 animated slideInLeft" id="jar-section">

CSS:

.sticky-jar-section {
    position: -webkit-sticky;
    position: sticky;
    top: 15px;
}

JavaScript:

var jar_section = document.getElementById("jar-section");

window.onResize = function() {
    if (window.innerWidth >= 992) {
        jar_section.classList.add("sticky-jar-section");
        Stickyfill.add(jar_section);
    } else {
        jar_section.classList.remove("sticky-jar-section");
        Stickyfill.remove(jar_section);
    }
};

我希望左栏跟随滚动，就像这个例子(不是我的):

https://codepen.io/tutsplus/pen/pJRRKW

编辑，因为我在此处复制代码时犯了一个错误，忘记了类周围的双引号。

Answer 1

只需添加:

#jar {
  padding: 0em 0em 0.5em 0em;
  position: sticky;
  top: 0px;

}

当不存在滚动时，它将表现为相对元素，当存在滚动时，它将表现为粘性元素，仅当两列都达到时才滚动文档结尾。

代码笔:https://codepen.io/anon/pen/LMrJae