Sticky text box

Site URL: https://caribou-brass-k4nh.squarespace.com/config/settings

Hi, wondering if anyone can help with some code. I would like this text box on the left to be sticky. This is a very long page and easier if this was always visible. It is the only page that features this list.

Hi, I am wondering if anyone can help

Can you share link to exact page? /config is url for site owner

Hi, thanks for getting back to me, here is another link. Its on the Services page

https://caribou-brass-k4nh.squarespace.com/

Hi @tuanphan and @Ignacik! I see that you solved this problem - do you mind sharing how you did so?

Hi, I can see that you managed to achieve a sticky text box with anchor links to the rest of the page on your site. Do you mind sharing how you did this/what code you need?

On 1/21/2021 at 9:32 PM, RSA said:

Hi, I can see that you managed to achieve a sticky text box with anchor links to the rest of the page on your site. Do you mind sharing how you did this/what code you need?

The site used this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
@media screen and (min-width: 641px) {
#block-yui_3_17_2_1_1593394634180_14692 div {
    position: fixed;
    z-index: 1997;
}
}
.Main-content {
    padding: 0 80px 90px 80px !important;
}
</style>
<script>
$(document).ready(function() {
    var services = $($('#block-yui_3_17_2_1_1593394634180_14692 div')[0])
    var heigh = $('.Footer').height()
    var header = $('.Header').height()
    window.addEventListener('scroll', function() {
        if (window.innerWidth >= 641) {
            if (window.scrollY + window.innerHeight + heigh + 90 > $('body').height()) {
                services.css("bottom" ,`${90 + heigh}px`)
            } else {
                services.css("bottom" , "unset")
            }
             if (window.scrollY > header) {
                services.css("top" ,"20px")
            } else {
                services.css("top" , "unset")
            }
        }
    })
})
</script>