Sticky Sections

Hi All

I'm trying to use sticky sections on a website but experiencing issues and would welcome some help! 

My sections will vary in height and include different types of information. Some sections will include drop downs and so only reveal information when clicked upon.

(See attached image, ***I have just stuck a dummy site up to illustrate problem: https://hypersphere-lime-gcj5.squarespace.com/)


I'm finding that at smaller browser sizes, say what you would view on 15inch laptop...the content of each section becomes cropped so the user is unable to actually read all the content of that section.

So for example the expansion of a set of drop down questions might not be readable because when the user scrolls the next sticky section slides over that content. 

My question is: Is there a way to stop this from happening?


Can code be added to ensure each section can also be viewed when scrolling?

I hope this makes sense,  I apologise in advance for ramblings.

Many thanks

P.S I think it might be something like the below but unsure, tried to use and seems to have no effect.
 

div# 3 .span-5 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}
section, article, #page, body {
    overflow: visible !important;
}

Your site is private, we can't access it. You can follow this.