How can I make a Bootstrap 4 column follow the scroll of the page?

Question

I have a row with two columns - one to the left (with a jar), and another to the right (with buttons).

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

When the screen is large, I have them side by side, and to see all of the right columns' contents, I have to scroll down. When I do so, I want the contents on the left column to follow that scroll, and that isn't currently happening.

Basically, when trying to select a filter from the bottom of the right column, I want the jar on the left column to accompany the scroll-down.

I've already tried a number of things:

I've tried to use media-queries - if the screen's min-width was 992px, I would apply a position: fixed or a position: sticky to the left column;
I've tried using JavaScript - on window.resize(), if the innerWidth was >= 992, I would apply position: fixed or position: sticky to the left column's style, or classList.add(position-fixed)/classList.add(position-sticky)/classList.add(sticky-top);
I'm currently trying to use stickyfill with the aforementioned solution to achieve my goal but to no avail.

Here's my code:

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);
    }
};

I expect the left column to follow the scroll, like in this example (not mine):

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

EDIT because I've made a mistake when copying the code here and forgot the double-quotes around a class.

You need to call the reference, not execute the function for `window.onResize`. In any case it's better to use `window.addEventListener('resize', function);` — Alexandre Elshobokshy, Jan 08 '19 at 11:35
Hey @IslamElshobokshy, I made a function called `windowResize()` and then added the event listener for the resize, making a callback to the `windowResize()` function. Still, I didn't get my expected result. What else do you suggest? Thanks — P. Dorado, Jan 08 '19 at 15:19

Mosè Raguzzini · Accepted Answer · 2019-01-09T08:34:42.573

2

It will be sufficient to add:

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

}

That will behave as relative element when no scroll is present, when scroll is present it will behave as sticky element, scrolling only when both columns have reached the end of the document.

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

edited Jan 09 '19 at 08:34

answered Jan 08 '19 at 12:26

Mosè Raguzzini

15,399
1
31
43

I'm sorry, I probably didn't understand what you said (even after multiple readings, my fault though) but it doesn't behave like I expected it to when I scroll down. – P. Dorado Jan 08 '19 at 14:28
Maybe it's my fault, what's the final result you're expecting ? – Mosè Raguzzini Jan 08 '19 at 14:34
Basically, when I scroll down to select a filter from the column on the right, I want the jar on the column to the left to follow the scroll. I may have not made this clear on my original post, so I'll edit it! Thanks for the patience! – P. Dorado Jan 08 '19 at 15:07
Sorry, this is still not clear. The default box model work as expected: as I scroll, all elements follow the scroll, no tricks need to be applied. – Mosè Raguzzini Jan 08 '19 at 15:18
My mistake, your code does indeed work! But it only moves the "My EmoJar" title and the jar itself - the counter just beneath the jar doesn't keep up with the movement of the jar. I've tried to apply your code to the whole column with the `id=jar-section`, as opposed to what you did, which was applied only to the jar - in that instance, your code does not work :/ How do I make your code work for the entire column, instead of just the jar? Many thanks! And sorry for my mistake! – P. Dorado Jan 08 '19 at 15:35
You have to enclose both elements in the same container (I.E:
) and then apply the above CSS to the container – Mosè Raguzzini Jan 08 '19 at 15:36
I approve of this answer tho, +1. – Alexandre Elshobokshy Jan 08 '19 at 15:50
@MosèRaguzzini, you're absolutely right :) ! I've put everything I wanted to move inside one single
(it just couldn't be the col with id="jar-section" itself, as I ran into some trouble if I did), and to it I applied the CSS you provided, thus achieving my end goal. I've accepted your answer. Thank you (and everybody else, of course!)! – P. Dorado Jan 08 '19 at 16:41

score 0 · Answer 2 · answered Jan 08 '19 at 16:16

I would create a div putting inside the part of code creating the element, and using sticky on that 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>

With sticky as suggested :

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

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

score -1 · Answer 3 · answered Jan 08 '19 at 16:47

The best solution is to remove the JavaScript code and to only use CSS with one media query. Extending Islam Elshobokshy's answer I would create a div inside the #jar-section div, and give the sticky attribute to the inner div with a media query.

Jar Section:

<!-- 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;
    }
}

Indeed, that's what I did following @MosèRaguzzini's suggestion! Thanks! — P. Dorado, Jan 08 '19 at 17:52
It wasn't me, in case you're wondering. All help is appreciated! — P. Dorado, Jan 10 '19 at 13:15

How can I make a Bootstrap 4 column follow the scroll of the page?

3 Answers3

Linked