How to get an element that is sticky to stop scrolling at a certain point in a Shopify Theme

Question

Using this Shopify theme on this cart page specifically from the browser console in chrome, how can we get the element called cart__details to be sticky(or fixed) so that when you scroll, it scrolls with you BUT stops scrolling right before it touches the footer. (Note please add a few items to the cart and then go to the cart page)

This is what I have done so far, I have got this to the point where the cart details div scrolls with me by editing this element from the browser console

<div class="cart__details cart__subtotal-widget element--has-border--body element--border-radius ">

to reflect the code below:

html[dir=ltr] .cart__subtotal-widget { left: 0;}

and

.cart__subtotal-widget {
padding: var(--gutter-regular);
padding-bottom: 50px;
position: fixed;
top: 32.25rem;}

I changed the position from sticky to fixed and that allowed it to start scrolling up and down the page with the user. Then I changed the value for top from 1.25rem to 32.25rem so that it remains on the right hand side of the screen.

Then I un-ticked or unchecked the value for html[dir=ltr] .cart__subtotal-widget so that it no longer reads the value of 0.

My issue now is that when I scroll towards the footer, it goes behind the footer. How do I give this some sort of boundary so that it stops scrolling with me when it get to a certain point or amount of pixels on the screen or something. I am not sure how to do that.

I have searched other similar examples on how to try this out but some of those examples used some javascript that I had no where to enter in my theme. I am not seeing a file for cart.js to use the javascript from the examples. Perhaps I can try to add it directly in the .liquid file where the html elements are (tried that but nothing happened.)

Any suggestions on how anyone can solve this? You can follow along in the browser console and let me know a solution or path to a solution.

Answer 1

You just need to make the right side sticky.

You can undo your current changes and add this CSS to make the right side sticky

#AjaxCartSubtotal {
    position: sticky;
    top: 0;
}

It will make the right side sticky and stop when it touches the footer. you can finer adjustments as you need afterward.

if any doubts please comment.