Question

我有一排有两列-一列在左边（带一个罐子），另一列在右边（带按钮）。

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

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

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

我已经尝试了很多方法：

我尝试使用媒体查询-如果屏幕的min-width是992px，我将在左侧应用position: fixed或position: sticky列；
我尝试使用JavaScript-在window.resize()上，如果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;

}

当没有滚动显示时，其行为将为relative element，当存在滚动显示时，其行为将为sticky element，仅当两列均到达文档末尾时才滚动 >。

Codepen：https://codepen.io/anon/pen/LMrJae

Answer 2

我将创建一个div放在创建元素的代码部分中，并在该sticky上使用div：

<div id="stay">
    <!-- Jar -->
    <div class="text-center" id="jar">
        <!-- Jar's name -->
        <h4>My EmoJar</h4>

        <!-- The jar itself, generated by D3.js -->
    </div>

    <!-- Jar's content counter (currently being shown vs. total) -->
    <div class="text-center">
        <h4><i class="fa fa-chevron-left jar-content-counter-icons"></i><span id="jar-content-counter-text"></span><i class="fa fa-chevron-right jar-content-counter-icons"></i></h4>
</div>

建议使用sticky：

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

Codepen：https://codepen.io/elshobokshy/pen/ebKwvL

Answer 3

最好的解决方案是删除JavaScript代码，并且仅将CSS与一个媒体查询一起使用。扩展Islam Elshobokshy的answer，我将在#jar-section div内创建一个div，并通过媒体查询将sticky属性赋予内部div。

瓶子部分：

<!-- Jar section -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 animated slideInLeft" id="jar-section">
    <div id="sticky-container">
        <!-- Jar -->
        <div class="text-center" id="jar">
            <!-- Jar's name -->
            <h4>My EmoJar</h4>
            <!-- The jar itself, generated by D3.js -->
        </div>
        <!-- Jar's content counter (currently being shown vs. total) -->
        <div class="text-center" id="jar-2">
            <h4><i class="fa fa-chevron-left jar-content-counter-icons"></i><span id="jar-content-counter-text"></span><i class="fa fa-chevron-right jar-content-counter-icons"></i></h4>
        </div>
        <hr width="50%">
    </div>
</div>

CSS：

#jar-section {
    padding: 0; /* this is only to overwrite the existing padding */
}
#sticky-container{
    top: 0;
    padding-top: 1em;
}
@media screen and (min-width: 992px) {
    #sticky-container{
        position: -webkit-sticky;
        position: sticky;
        top: 1em;
        padding-top:0;
    }
}

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

3 个答案: